CSS3 @keyframes 规则

实例

使 div 元素匀速向下移动：

  1. @keyframes mymove
  2. {
  3. from {top:0px;}
  4. to {top:200px;}
  5. }
  6. @-moz-keyframes mymove / Firefox /
  7. {
  8. from {top:0px;}
  9. to {top:200px;}
  10. }
  11. @-webkit-keyframes mymove / Safari 和 Chrome /
  12. {
  13. from {top:0px;}
  14. to {top:200px;}
  15. }
  16. @-o-keyframes mymove / Opera /
  17. {
  18. from {top:0px;}
  19. to {top:200px;}
  20. }

页面底部有更多实例。

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

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

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法

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

值 描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。 合法的值： 0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

实例

实例 1

在一个动画中添加多个 keyframe 选择器：

  1. @keyframes mymove
  2. {
  3. 0%   {top:0px;}
  4. 25%  {top:200px;}
  5. 50%  {top:100px;}
  6. 75%  {top:200px;}
  7. 100% {top:0px;}
  8. }
  9. @-moz-keyframes mymove / Firefox /
  10. {
  11. 0%   {top:0px;}
  12. 25%  {top:200px;}
  13. 50%  {top:100px;}
  14. 75%  {top:200px;}
  15. 100% {top:0px;}
  16. }
  17. @-webkit-keyframes mymove / Safari 和 Chrome /
  18. {
  19. 0%   {top:0px;}
  20. 25%  {top:200px;}
  21. 50%  {top:100px;}
  22. 75%  {top:200px;}
  23. 100% {top:0px;}
  24. }
  25. @-o-keyframes mymove / Opera /
  26. {
  27. 0%   {top:0px;}
  28. 25%  {top:200px;}
  29. 50%  {top:100px;}
  30. 75%  {top:200px;}
  31. 100% {top:0px;}
  32. }

实例 2

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

  1. @keyframes mymove
  2. {
  3. 0%   {top:0px; background:red; width:100px;}
  4. 100% {top:200px; background:yellow; width:300px;}
  5. }
  6. @-moz-keyframes mymove / Firefox /
  7. {
  8. 0%   {top:0px; background:red; width:100px;}
  9. 100% {top:200px; background:yellow; width:300px;}
  10. }
  11. @-webkit-keyframes mymove / Safari 和 Chrome /
  12. {
  13. 0%   {top:0px; background:red; width:100px;}
  14. 100% {top:200px; background:yellow; width:300px;}
  15. }
  16. @-o-keyframes mymove / Opera /
  17. {
  18. 0%   {top:0px; background:red; width:100px;}
  19. 100% {top:200px; background:yellow; width:300px;}
  20. }

实例 3

带有多个 CSS 样式的多个 keyframe 选择器：

  1. @keyframes mymove
  2. {
  3. 0%   {top:0px; left:0px; background:red;}
  4. 25%  {top:0px; left:100px; background:blue;}
  5. 50%  {top:100px; left:100px; background:yellow;}
  6. 75%  {top:100px; left:0px; background:green;}
  7. 100% {top:0px; left:0px; background:red;}
  8. }
  9. @-moz-keyframes mymove / Firefox /
  10. {
  11. 0%   {top:0px; left:0px; background:red;}
  12. 25%  {top:0px; left:100px; background:blue;}
  13. 50%  {top:100px; left:100px; background:yellow;}
  14. 75%  {top:100px; left:0px; background:green;}
  15. 100% {top:0px; left:0px; background:red;}
  16. }
  17. @-webkit-keyframes mymove / Safari and Chrome /
  18. {
  19. 0%   {top:0px; left:0px; background:red;}
  20. 25%  {top:0px; left:100px; background:blue;}
  21. 50%  {top:100px; left:100px; background:yellow;}
  22. 75%  {top:100px; left:0px; background:green;}
  23. 100% {top:0px; left:0px; background:red;}
  24. }
  25. @-o-keyframes mymove / Opera /
  26. {
  27. 0%   {top:0px; left:0px; background:red;}
  28. 25%  {top:0px; left:100px; background:blue;}
  29. 50%  {top:100px; left:100px; background:yellow;}
  30. 75%  {top:100px; left:0px; background:green;}
  31. 100% {top:0px; left:0px; background:red;}
  32. }

相关页面

CSS3 教程：CSS3 动画