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

Question

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

"@"和"100%"是什么意思？

Answer 1

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

您可以为动画定义任意数量的关键帧; 如果您只给出了最终的关键帧(当100%的动画完成时)已经定义.可以在此处找到这些规则的完整语法和文档.

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

@-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;
        }
}