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

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

原文地址：https://www.jb51.cc/css/215819.html