参考手册
CSS3 过渡
CSS3 工具提示

CSS3 动画效果(animation)

CSS 动画

CSS 可实现 HTML 元素的动画效果，而不使用 JavaScript 或 Flash！

CSS

在本章中，您将学习如下属性：

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

对动画的浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
@keyframes43.010.016.09.030.0
animation-name43.010.016.09.030.0
animation-duration43.010.016.09.030.0
animation-delay43.010.016.09.030.0
animation-iteration-count43.010.016.09.030.0
animation-direction43.010.016.09.030.0
animation-timing-function43.010.016.09.030.0
animation-fill-mode43.010.016.09.030.0
animation43.010.016.09.030.0

什么是 CSS 动画？

  • 动画使元素逐渐从一种样式变为另一种样式。
  • 您可以随意更改任意数量的 CSS 属性。
  • 如需使用 CSS 动画，您必须首先为动画指定一些关键帧。
  • 关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 "example" 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 "red" 逐渐改为 "yellow"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   animation-name: example;
  10.   animation-duration: 4s;
  11. }
  13. @keyframes example {
  14.   from {background-color: red;}
  15.   to {background-color: yellow;}
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  23. <div></div>
  25. <p><b>注释：</b>当动画结束后，会变回最初的样式。</p>
  27. </body>
  28. </html>
运行一下

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   animation-name: example;
  10.   animation-duration: 4s;
  11. }
  13. @keyframes example {
  14.   0%   {background-color: red;}
  15.   25%  {background-color: yellow;}
  16.   50%  {background-color: blue;}
  17.   100% {background-color: green;}
  18. }
  19. </style>
  20. </head>
  21. <body>
  23. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  25. <div></div>
  27. </body>
  28. </html>
运行一下

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和 <div> 元素的位置：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 4s;
  12. }
  14. @keyframes example {
  15.   0%   {background-color:red; left:0px; top:0px;}
  16.   25%  {background-color:yellow; left:200px; top:0px;}
  17.   50%  {background-color:blue; left:200px; top:200px;}
  18.   75%  {background-color:green; left:0px; top:200px;}
  19.   100% {background-color:red; left:0px; top:0px;}
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  27. <div></div>
  29. </body>
  30. </html>
运行一下

延迟动画

animation-delay 属性规定动画开始的延迟时间。

下面的例子在开始动画前有 2 秒的延迟：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 4s;
  12.   animation-delay: 2s;
  13. }
  15. @keyframes example {
  16.   0%   {background-color:red; left:0px; top:0px;}
  17.   25%  {background-color:yellow; left:200px; top:0px;}
  18.   50%  {background-color:blue; left:200px; top:200px;}
  19.   75%  {background-color:green; left:0px; top:200px;}
  20.   100% {background-color:red; left:0px; top:0px;}
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  28. <div></div>
  30. </body>
  31. </html>
运行一下

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 4s;
  12.   animation-delay: -2s;
  13. }
  15. @keyframes example {
  16.   0%   {background-color:red; left:0px; top:0px;}
  17.   25%  {background-color:yellow; left:200px; top:0px;}
  18.   50%  {background-color:blue; left:200px; top:200px;}
  19.   75%  {background-color:green; left:0px; top:200px;}
  20.   100% {background-color:red; left:0px; top:0px;}
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <p>使用负值：在这里，动画将开始播放，就好像它已经播放 2 秒一样：</p>
  28. <div></div>
  30. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  32. </body>
  33. </html>
运行一下

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

下面的例子在停止前把动画运行 3 次：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 4s;
  12.   animation-iteration-count: 3;
  13. }
  15. @keyframes example {
  16.   0%   {background-color:red; left:0px; top:0px;}
  17.   25%  {background-color:yellow; left:200px; top:0px;}
  18.   50%  {background-color:blue; left:200px; top:200px;}
  19.   75%  {background-color:green; left:0px; top:200px;}
  20.   100% {background-color:red; left:0px; top:0px;}
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  28. <div></div>
  30. </body>
  31. </html>
运行一下

下面的例子使用值 "infinite" 使动画永远持续下去：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 4s;
  12.   animation-iteration-count: infinite;
  13. }
  15. @keyframes example {
  16.   0%   {background-color:red; left:0px; top:0px;}
  17.   25%  {background-color:yellow; left:200px; top:0px;}
  18.   50%  {background-color:blue; left:200px; top:200px;}
  19.   75%  {background-color:green; left:0px; top:200px;}
  20.   100% {background-color:red; left:0px; top:0px;}
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  28. <div></div>
  30. </body>
  31. </html>
运行一下

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

  • normal - 动画正常播放（向前）。默认值
  • reverse - 动画以反方向播放（向后）
  • alternate - 动画先向前播放，然后向后
  • alternate-reverse - 动画先向后播放，然后向前

下例将以相反的方向（向后）运行动画：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 4s;
  12.   animation-direction: reverse;
  13. }
  15. @keyframes example {
  16.   0%   {background-color:red; left:0px; top:0px;}
  17.   25%  {background-color:yellow; left:200px; top:0px;}
  18.   50%  {background-color:blue; left:200px; top:200px;}
  19.   75%  {background-color:green; left:0px; top:200px;}
  20.   100% {background-color:red; left:0px; top:0px;}
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  28. <div></div>
  30. </body>
  31. </html>
运行一下

下面的例子使用值 "alternate" 使动画先向前运行，然后向后运行：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 4s;
  12.   animation-iteration-count: 2;
  13.   animation-direction: alternate;
  14. }
  16. @keyframes example {
  17.   0%   {background-color:red; left:0px; top:0px;}
  18.   25%  {background-color:yellow; left:200px; top:0px;}
  19.   50%  {background-color:blue; left:200px; top:200px;}
  20.   75%  {background-color:green; left:0px; top:200px;}
  21.   100% {background-color:red; left:0px; top:0px;}
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  29. <div></div>
  31. </body>
  32. </html>
运行一下

下面的例子使用值 "alternate-reverse" 使动画先向后运行，然后向前运行：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 4s;
  12.   animation-iteration-count: 2;
  13.   animation-direction: alternate-reverse;
  14. }
  16. @keyframes example {
  17.   0%   {background-color:red; left:0px; top:0px;}
  18.   25%  {background-color:yellow; left:200px; top:0px;}
  19.   50%  {background-color:blue; left:200px; top:200px;}
  20.   75%  {background-color:green; left:0px; top:200px;}
  21.   100% {background-color:red; left:0px; top:0px;}
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  29. <div></div>
  31. </body>
  32. </html>
运行一下

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

  • ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
  • linear - 规定从开始到结束的速度相同的动画
  • ease-in - 规定慢速开始的动画
  • ease-out - 规定慢速结束的动画
  • ease-in-out - 指定开始和结束较慢的动画
  • cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 50px;
  8.   background-color: red;
  9.   font-weight: bold;
  10.   position: relative;
  11.   animation: mymove 5s infinite;
  12. }
  14. #div1 {animation-timing-function: linear;}
  15. #div2 {animation-timing-function: ease;}
  16. #div3 {animation-timing-function: ease-in;}
  17. #div4 {animation-timing-function: ease-out;}
  18. #div5 {animation-timing-function: ease-in-out;}
  20. @keyframes mymove {
  21.   from {left: 0px;}
  22.   to {left: 300px;}
  23. }
  24. </style>
  25. </head>
  26. <body>
  28. <p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 animation-timing-funtion 属性。</p>
  30. <div id="div1">linear</div>
  31. <div id="div2">ease</div>
  32. <div id="div3">ease-in</div>
  33. <div id="div4">ease-out</div>
  34. <div id="div5">ease-in-out</div>
  36. </body>
  37. </html>
运行一下

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

  • none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
  • forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
  • backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
  • both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

下面的例子让 <div> 元素在动画结束时保留来自最后一个关键帧的样式值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 3s;
  12.   animation-fill-mode: forwards;
  13. }
  15. @keyframes example {
  16.   from {top: 0px;}
  17.   to {top: 200px; background-color: blue;}
  18. }
  19. </style>
  20. </head>
  21. <body>
  23. <p>动画结束后，让 div 元素保留最后一个关键帧的样式值：</p>
  25. <div></div>
  27. <p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。</p>
  29. </body>
  30. </html>
运行一下

下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 3s;
  12.   animation-delay: 2s;
  13.   animation-fill-mode: backwards;
  14. }
  16. @keyframes example {
  17.   from {top: 0px; background-color: yellow;}
  18.   to {top: 200px;}
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <p>动画开始之前（animation-delay 期间），让 div 元素获取第一个关键帧设置的样式值：</p>
  26. <div></div>
  28. <p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。</p>
  30. </body>
  31. </html>
运行一下

下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 3s;
  12.   animation-delay: 2s;
  13.   animation-fill-mode: both;
  14. }
  16. @keyframes example {
  17.   from {top: 0px; background-color: yellow;}
  18.   to {top: 200px; background-color: blue;}
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <p>在动画开始之前，让 div 元素获取第一个关键帧设置的样式值，并在动画结束时保留最后一个关键帧的样式值：</p>
  26. <div></div>
  28. <p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。</p>
  30. </body>
  31. </html>
运行一下

动画简写属性

下例使用六种动画属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation-name: example;
  11.   animation-duration: 5s;
  12.   animation-timing-function: linear;
  13.   animation-delay: 2s;
  14.   animation-iteration-count: infinite;
  15.   animation-direction: alternate;
  16. }
  18. @keyframes example {
  19.   0%   {background-color:red; left:0px; top:0px;}
  20.   25%  {background-color:yellow; left:200px; top:0px;}
  21.   50%  {background-color:blue; left:200px; top:200px;}
  22.   75%  {background-color:green; left:0px; top:200px;}
  23.   100% {background-color:red; left:0px; top:0px;}
  24. }
  25. </style>
  26. </head>
  27. <body>
  29. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  31. <div></div>
  33. </body>
  34. </html>
运行一下

使用简写的 animation 属性也可以实现与上例相同的动画效果：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6.   width: 100px;
  7.   height: 100px;
  8.   background-color: red;
  9.   position: relative;
  10.   animation: myfirst 5s linear 2s infinite alternate;
  11. }
  13. @keyframes myfirst {
  14.   0%   {background-color:red; left:0px; top:0px;}
  15.   25%  {background-color:yellow; left:200px; top:0px;}
  16.   50%  {background-color:blue; left:200px; top:200px;}
  17.   75%  {background-color:green; left:0px; top:200px;}
  18.   100% {background-color:red; left:0px; top:0px;}
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
  26. <div></div>
  28. </body>
  29. </html>
运行一下

CSS 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性描述
@keyframes规定动画模式。
animation设置所有动画属性的简写属性。
animation-delay规定动画开始的延迟。
animation-direction定动画是向前播放、向后播放还是交替播放。
animation-duration规定动画完成一个周期应花费的时间。
animation-fill-mode规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count规定动画应播放的次数。
animation-name规定 @keyframes 动画的名称。
animation-play-state规定动画是运行还是暂停。
animation-timing-function规定动画的速度曲线。
CSS3 过渡
CSS3 工具提示

分类导航