CSS3 动画

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 动画

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

浏览器支持



属性 浏览器支持
@keyframes ie firefox chrome safari opera
animation ie firefox chrome safari opera

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

实例

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

CSS3 动画

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称
  • 规定动画的时长

实例

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

  1. div
  2. {
  3. animation: myfirst 5s;
  4. -moz-animation: myfirst 5s;    /* Firefox */
  5. -webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
  6. -o-animation: myfirst 5s;    /* Opera */
  7. }

注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

什么是 CSS3 中的动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

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

实例

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

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

实例

改变背景色和位置：

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

CSS3 动画属性

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

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

下面的两个例子设置了所有动画属性：

实例

运行名为 myfirst 的动画，其中设置了所有动画属性：

  1. div
  2. {
  3. animation-name: myfirst;
  4. animation-duration: 5s;
  5. animation-timing-function: linear;
  6. animation-delay: 2s;
  7. animation-iteration-count: infinite;
  8. animation-direction: alternate;
  9. animation-play-state: running;
  10. /* Firefox: */
  11. -moz-animation-name: myfirst;
  12. -moz-animation-duration: 5s;
  13. -moz-animation-timing-function: linear;
  14. -moz-animation-delay: 2s;
  15. -moz-animation-iteration-count: infinite;
  16. -moz-animation-direction: alternate;
  17. -moz-animation-play-state: running;
  18. /* Safari 和 Chrome: */
  19. -webkit-animation-name: myfirst;
  20. -webkit-animation-duration: 5s;
  21. -webkit-animation-timing-function: linear;
  22. -webkit-animation-delay: 2s;
  23. -webkit-animation-iteration-count: infinite;
  24. -webkit-animation-direction: alternate;
  25. -webkit-animation-play-state: running;
  26. /* Opera: */
  27. -o-animation-name: myfirst;
  28. -o-animation-duration: 5s;
  29. -o-animation-timing-function: linear;
  30. -o-animation-delay: 2s;
  31. -o-animation-iteration-count: infinite;
  32. -o-animation-direction: alternate;
  33. -o-animation-play-state: running;
  34. }

实例

与上面的动画相同，但是使用了简写的动画 animation 属性：

  1. div
  2. {
  3. animation: myfirst 5s linear 2s infinite alternate;
  4. /* Firefox: */
  5. -moz-animation: myfirst 5s linear 2s infinite alternate;
  6. /* Safari 和 Chrome: */
  7. -webkit-animation: myfirst 5s linear 2s infinite alternate;
  8. /* Opera: */
  9. -o-animation: myfirst 5s linear 2s infinite alternate;
  10. }