@-webkit-keyframes roll {
100% { -webkit-transform: rotate(360deg); }
}
“@”和“100％”是什么意思？
解决方法
这些是由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;
}
}
