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

Posted 2023-02-24

【中文标题】这个 CSS 语句中的“@”是啥意思？

【英文标题】：What does the "@" in this CSS statement mean?这个 CSS 语句中的“@”是什么意思？

【发布时间】：2012-01-02 04:04:44

【问题描述】：

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

“@”和“100%”是什么意思？

【问题讨论】：

重复***.com/questions/3453257/…

这不是该问题的直接重复，因为它指的是未在此处记录的 -webkit 特定规则。

同意，这不是重复的（至少，不是链接到的问题）。链接的问题是指非常不同的@ 规则。

这就是为什么我突然对我对这个问题的回答获得了赞成票。虽然我的回答确实解释了 @ 符号的用途，但我同意 Duncan 和 James 的观点，因为它没有充分回答这个特定的 WebKit 问题。

【参考方案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;
        

【参考方案2】：

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

“100%”指的是由@keyframes 规则定义的CSS 动画的最终状态，或者在本例中为@-webkit-keyframes 规则。您实际上必须声明动画的第一个 (0%) 和最终 (100%) 状态，以便用户代理知道何时开始和停止动画。

这里还有一些： At-Rules 是渲染引擎的指令；它们将 CSS 规则集语法扩展到常规选择器和声明块之外。 At-Rules 使用 At-Keyword 声明，即简单的“@keyword”，后跟与所使用的 At-Keyword 相关的 At-Rules 语句。示例：@charset "ISO-8859-15";

根据 At-Rule 语句类型，可选参数可以跟在 At-Keyword 后面。示例：@media screen color:#000; ，其中 screen 是可选参数。