css - 这个 CSS 语句中的 "@"是什么意思？

Question

@-webkit-keyframes roll {
    100% { -webkit-transform: rotate(360deg); }
}

“@”和“100%”是什么意思？

Answer 1

这些是 webkit 开发团队定义的 CSS3 规则，在被正式接受为 CSS3 规范的一部分之前——因此在选择器中包含了 -webkit。 @ 表示这是一个 CSS 规则，而不是标准选择器。 @-webkit-keyframes 用于指定CSS视觉效果动画属性的关键帧。

您可以为动画定义任意数量的关键帧；如果您只给出了最终关键帧(当 100% 的动画完成时)已被定义。 The full syntax and documentation for these rules can be found here.

例如，如果您希望动画缓慢开始然后加速，同时平滑地开始和结束，您可以设置在旋转度数方面具有非线性步长的中间关键帧:

@-webkit-keyframes roll {
    25% { -webkit-transform: rotate(24deg);
          -webkit-animation-timing-function: ease-in;
        }
    50% { -webkit-transform: rotate(72deg); }
    75% { -webkit-transform: rotate(168deg); }
    100% { -webkit-transform: rotate(360deg); 
        -webkit-animation-timing-function: ease-out;
        }
}