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

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

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

来源

2011-11-20 Leo Jiang

重复http://stackoverflow.com/questions/3453257/what-is-the-purpose-of-the-symbol-in-css –

这不是该问题的直接重复，因为它指的是 - webkit特定的规则没有记录在那里。 –

同意，这不是重复的（至少，不是与之相关的问题）。链接的问题指的是非常不同的'@'规则。 –

这些是已经由WebKit开发团队定义，在正式接受作为CSS3规范，因此在选择纳入-webkit的一部分CSS3规则。 @表示这是一个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; 
     } 
}

来源

2011-11-20 00:55:50

“@”在样式表中声明了一个At-Rule。无论如何，它肯定有特殊的含义。

的“100％”指的是由@keyframes规则定义的CSS动画的最终状态，或在这种情况下，@ -webkit关键帧的规则。您实际上必须声明动画的第一个（0％）和最终（100％）状态，以便用户代理知道何时开始和停止动画。

这里的多一些：在规则被指令来渲染引擎;它们将CSS规则集语法扩展到常规选择器和声明块之外。 At-Rules使用At关键字进行声明，该关键字只是“@keyword”，后面是关于所使用的关键字的At-Rules声明。例如：@charset“ISO-8859-15”;

可选参数可以按照在-关键字取决于AT-规则语句类型。例如：@media screen {color：＃000; }，其中screen是可选参数。

来源

2011-11-20 02:11:35 albert

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

回答

相关问题