@规则

一个 @rule 是一个 CSS 语句，以 @ 符号开头，后跟一个标识符，并包括直到下一个分号或下一个 CSS 规则块，以先到者为准。所有的 @ 规则都只允许写在顶层。

下面是 CSS 支持的 @规则，由它们的标示符指定。

`@keyframes`

关键帧@keyframes规则通过在动画序列中定义关键帧的样式来控制 CSS 动画序列中的中间步骤。和transition相比，keyframes可以控制动画序列的中间步骤。

属性个数不定

如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。例如：

@keyframes identifier {
    0% {
        background-color: blue;
        opacity: 0;
    }
    30% {
        opacity: 0.3;
    }
    72% {
        background-color: yellow;
    }
    100% {
        opacity: 1;
        background-color: red;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

关键帧取值

from：等价于0%。
to：等价于100%。
<percentage>：动画序列中触发关键帧的时间点，使用百分值来表示。

支持的属性

keyframes动画仅支持transform、opacity、background-color属性。

`@font-face`

@font-face指定一个用于显示文本的自定义字体，字体能从远程服务器或者用户本地安装的字体加载。

语法

@font-face {
  [ font-family: <string>; ] ||
  [ src: url(<string>); ]
}

1
2
3
4

声明取值

`font-family`

使用字符串指定字体名称，并且指定的字体名字将会被用于font或font-family属性。

`src`

使用逗号分割排列出所有可用的字体，可以使用url函数来指定远程字体。

# @规则

# @keyframes

# 属性个数不定

# 关键帧取值

# 支持的属性

# @font-face

# 语法

# 声明取值

# font-family

# src

@规则