Regla CSS @keyframes

Definición y uso

A través de la regla @keyframes, puede crear animaciones.

El principio de creación de animación es, cambiar gradualmente un conjunto de estilos CSS a otro conjunto.

En el proceso de animación, puede cambiar varias veces este conjunto de estilos CSS.

Se especifica el tiempo en el que ocurre el cambio mediante porcentajes, o a través de las palabras clave "from" y "to", equivalentes a 0% y 100%.

0% es el tiempo de inicio de la animación, 100% es el tiempo de finalización de la animación.

Consejo:Para obtener el mejor soporte del navegador, debe definir siempre los selectores 0% y 100%.

Consejo:Use las propiedades de animación para controlar el aspecto de la animación, al mismo tiempo que la enlace con el selector.

例子 5!important Regla se ignora en los cuadros clave (véase el último ejemplo de esta página).

Vea también:

Tutorial de CSS3:Animaciones CSS3

Ejemplo

Ejemplo 1

使 div 元素匀速向下移动：

带有多个 CSS 样式的多个 keyframe 选择器：
  @keyframes myexample {
  使 div 元素匀速向下移动：
to   {top: 200px;}

}

to {top: 200px;}

例子 2

带有多个 CSS 样式的多个 keyframe 选择器：
  在一个动画中添加多个 keyframe 选择器：
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
to   {top: 200px;}

}

100% {top: 0px;}

例子 3

带有多个 CSS 样式的多个 keyframe 选择器：
  在一个动画中改变多个 CSS 样式：
  0%   {top: 0px; background: red; width: 100px;}
to   {top: 200px;}

}

100% {top: 200px; background: yellow; width: 300px;}

例子 4

带有多个 CSS 样式的多个 keyframe 选择器：
  @keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
to   {top: 200px;}

}

100% {top: 0px; left: 0px; background: red;}

例子 5注意：

!important 规则在关键帧中被忽略：
  @keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* 被忽略 */
to   {top: 200px;}

}

亲自试一试

CSS 语法 描述 @keyframes必需。定义动画的名称。 @keyframesto（与 100% 相同）{

;}}

属性值 值
描述 animationname
必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

  • 合法的值：
  • 0-100%
  • from（与 0% 相同）
to（与 100% 相同） css-styles

兼容性。必需。一个或多个合法的 CSS 样式属性。

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-