CSS设置@keyframes动画在浏览器审查面板显示删除线问题求助

你代码里的calc()函数存在语法错误，是导致动画属性被标记删除线的核心原因：CSS中calc()的加减运算符左右两侧必须保留空格，你写的calc(100%-40px)没有加空格，浏览器无法解析该属性值，因此判定为无效属性，显示删除线。

修复后的@keyframes代码 #

@keyframes slide {
    50%{
        left: calc(100% - 40px);
        top: calc(100% - 40px);
    }
    100% {
        z-index: -1;
    }
}

如果需要地球绕太阳循环运动，你还可以给.earth补充两个动画属性：

• animation-iteration-count: infinite 让动画无限循环
• animation-timing-function: linear 让动画运动速度保持均匀

内容的提问来源于stack exchange，提问作者codeswitha