码农教程 - 一技在手,衣食无忧! tools

目录

CSS @keyframes 规则

❮上一节 完整的CSS参考 下一节❯

示例

让一个元素逐渐向下移动 200px：

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个@keyframes规则指定动画代码。

动画是通过逐渐从一组 CSS 样式更改为另一组 CSS 样式来创建的。

在动画过程中，您可以多次更改 CSS 样式集。

以百分比指定何时发生样式更改，或使用关键字 "from" 和 "to"（与 0% 和 100% 相同）。 0% 是动画开始时，100% 是动画完成时。

提示：为了获得最佳浏览器支持，您应该始终定义 0% 和 100% 选择器。

笔记：使用动画属性来控制动画的外观，并将动画绑定到选择器。

笔记：!important 规则在关键帧中被忽略（请参阅本页的最后一个示例）。

浏览器支持

表中的数字指定完全支持该规则的第一个浏览器版本。

后跟 -webkit-、-moz- 或 -o- 的数字指定使用前缀的第一个版本。

Property
@keyframes 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-

CSS 语法

@keyframes animationname { keyframes-selector { css-styles;}}

属性值

Value Description
animationname Required. Defines the name of the animation.
keyframes-selector Required. Percentage of the animation duration.

Legal values:

0-100%
from (same as 0%)
to (same as 100%)

Note: You can have many keyframes-selectors in one animation.
css-styles Required. One or more legal CSS style properties

更多示例

示例

在一个动画中添加多个关键帧选择器：

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}
亲自试一试 »

示例

在一个动画中更改多种 CSS 样式：

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}
亲自试一试 »

示例

许多具有多种 CSS 样式的关键帧选择器：

@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;}
  100% {top: 0px; left: 0px; background: red;}
}
亲自试一试 »

示例

笔记：!important 规则在关键帧中被忽略：

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* ignored */
  to   {top: 200px;}
}
亲自试一试 »

相关页面

CSS教程：CSS 动画


❮上一节 完整的CSS参考 下一节❯