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

Answer 2

“@”在样式表中声明一个At-Rule。在每种情况下，它肯定都有特殊意义。

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

这里还有一些： At-Rules是渲染引擎的指令;它们将CSS规则集语法扩展到常规的Selector和Declaration块之外。使用At-Keyword声明At-Rules，该关键字只是“@keyword”，后跟相对于所使用的At-Keyword的At-Rules声明。示例：@charset“ISO-8859-15”;

可选参数可以遵循At-Keyword，具体取决于At-Rule Statement类型。示例：@media screen {color：＃000; }，其中screen是可选参数。

什么是＆＃34; @＆＃34;在这个CSS声明中意味着什么

2 个答案: