首页 > 网页设计 > CSS3之动画Animation

CSS3之动画Animation

CSS3发布已经有很多日子了,现在很多网站都开始尝试用CSS3制作一些好玩的东西,甚至有些公司把CSS3作为制作网站的技术来广泛应用。今天和大家分享CSS3之动画Animation的一些小东东,希望能对大家有所帮助。

 

一、Animation的语法

 

1、@keyframes——插入关键帧

 

(1)FormTo形式:

 

[css][/css] view plaincopyprint?

  1. @keyframes demo {
  2.      from {
  3.        Properties:Properties value;
  4.      }
  5.      Percentage {
  6.        Properties:Properties value;
  7.      }
  8.      to {
  9.        Properties:Properties value;
  10.      }
  11. }

 

 

(2)百分比的形式:

 

[css][/css] view plaincopyprint?

  1. @keyframes demo {
  2.       0% {
  3.          Properties:Properties value;
  4.       }
  5.       Percentage {
  6.          Properties:Properties value;
  7.       }
  8.       100% {
  9.          Properties:Properties value;
  10.       }
  11. }

 

 

2、animation-name——定义动画的名称

 

[css][/css] view plaincopyprint?

  1. animation-name: none | “动画的名称”;

 

 

(1)动画的名称是由Keyframes创建的动画名,这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果

(2)none为默认值,当值为none时,将没有任何动画效果

 

3、animation-duration

 

[css][/css] view plaincopyprint?

  1. animation-duration: time (s)

 

 

animation-duration是指定元素播放动画所持续的时间,取值为数值,单位为秒(s),其默认值为“0”。

 

4、animation-timing-function

 

[css][/css] view plaincopyprint?

  1. animation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)

 

 

animation-timing-function是用来指定动画的播放方式,具有以下六种变换方式:ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。

 

5、animation-delay

 

[css][/css] view plaincopyprint?

  1. animation-delay: time(s)

 

 

animation-delay:是用来指定元素动画开始时间。取值为数值,单位为秒(s),其默认值为“0”。这个属性和animation-duration使用方法是一样的。

 

6、animation-iteration-count

 

[css][/css] view plaincopyprint?

  1. animation-iteration-count:infinite || number

 

 

animation-iteration-count是指定元素播放动画的循环次数,其取值为数字,默认值为“1”或者infinite(无限次数循环)。

 

7、animation-direction

 

[css][/css] view plaincopyprint?

  1. animation-direction: normal || alternate

 

 

animation-direction是指定元素动画播放的方向,如果是normal,那么动画的每次循环都是向前播放;如果是alternate,那么动画播放在第偶数次向前播放,第奇数次向反方向播放。

 

8、animation-play-state

 

[css][/css] view plaincopyprint?

  1. animation-play-state:running || paused

 

 

animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused,其中running为默认值。这个属性目前很少内核支持,所以只是稍微提一下。

 

二、Animation的综合写法

[css][/css] view plaincopyprint?

  1. animation:定义动画的名称 || 动画持续时间 || 动画的播放方式 || 动画开始时间 || 动画循环次数 || 动画播放方向

 

 

三、Animation的兼容情况


梦龙小站

 

四、Animation的小实例

 

CSS代码:

 

[css][/css] view plaincopyprint?

  1. /*全局样式*/
  2. .wraper {width:960px;margin:0 auto;}
  3. h1 b {font-size:20px;}
  4. li a,h1 b span {text-decoration:none;color:#f00;}
  5. li a:hover {text-decoration:underline;}
  6. /*过渡的样式*/
  7. #timings-demo {border: 1px solid #ccc;padding: 10px;height: 300px;width: 400px;}
  8. .btn {width: 100px;height: 50px;line-height: 50px;text-align: center;color: #fff;margin-bottom: 10px;display:block;margin-left:145px;
  9.     -webkit-border-radius: 5px;
  10. }
  11. .btn1 {
  12.     -webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
  13. }
  14. .btn2 {
  15.     -webkit-box-shadow: 1px 1px 5px rgba(132, 123,100,0.5);
  16. }
  17. .btn3 {
  18.     background:-webkit-linear-gradient(top, red, blue);
  19. }
  20. .btn4 {
  21.     text-shadow: none
  22. }
  23. .btn5 {
  24.     margin-left:145px;
  25. }
  26. /*逐渐变慢改变背景效果:*/
  27. .btn1 {background: #f36;}
  28. #timings-demo:hover .btn1 {
  29.     -webkit-animation: 'buttonLight' 3s ease 0.3s;
  30. }
  31. /*加速旋转效果*/
  32. .btn2 {background: #f36;}
  33. #timings-demo:hover .btn2 {
  34.     -webkit-animation: 'rotate' 3s ease-in 0.3s;
  35. }
  36. /*减速渐变背景效果*/
  37. #timings-demo:hover .btn3 {
  38.     -webkit-animation: 'gradient' 3s ease-out 0.3s;
  39. }
  40. /*匀速文字阴影效果*/
  41. .btn4 {background: #f36;}
  42. #timings-demo:hover .btn4 {
  43.     -webkit-animation: 'gradient' 3s ease-out 0.3s;
  44. }
  45. /*自定义一段曲线左边距效果*/
  46. .btn5 {background: #f36;}
  47. #timings-demo:hover .btn5 {
  48.     -webkit-animation: 'marginLeft' 3s cubic-bezier(0.250, 1.650, 0.795, -0.425) 0.3s;
  49. }
  50. /*逐渐变慢改变背景动画帧数*/
  51. @-webkit-keyframes 'buttonLight' {
  52.     0% {
  53.          background:#f36;
  54.          color:#fff;
  55.     }
  56.     50% {
  57.         background:#fff;
  58.         color:green;
  59.     }
  60.     100% {
  61.          background:#f36;
  62.          color:#fff;
  63.     }
  64. }
  65. /*加速旋转动画帧数*/
  66. @-webkit-keyframes 'rotate' {
  67.     0% {
  68.          -webkit-transform: rotate(0deg);
  69.          -webkit-box-shadow: 1px 1px 5px rgba(132, 123,100,0.5);
  70.     }
  71.     50% {
  72.          -webkit-transform: rotate(180deg);
  73.          -webkit-box-shadow: 0px -3px 5px #000;
  74.     }
  75.     100% {
  76.          -webkit-transform: rotate(0deg);
  77.          -webkit-box-shadow: 1px 1px 5px rgba(132, 123,100,0.5);
  78.     }
  79. }
  80. /*减速渐变背景动画帧数*/
  81. @-webkit-keyframes 'gradient' {
  82.     0% {
  83.          background:-webkit-linear-gradient(top, red, blue);
  84.     }
  85.     50% {
  86.          background:-webkit-linear-gradient(top, blue, red);
  87.     }
  88.     100% {
  89.          background:-webkit-linear-gradient(top, red, blue);
  90.     }
  91. }
  92. /*匀速文字阴影动画帧数*/
  93. @-webkit-keyframes 'gradient' {
  94.     0% {
  95.         text-shadow: none
  96.     }
  97.     50% {
  98.          text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
  99.     }
  100.     100% {
  101.          text-shadow: none
  102.     }
  103. }
  104. /*自定义一段曲线左边距动画帧数*/
  105. @-webkit-keyframes 'marginLeft' {
  106.     0% {
  107.         margin-left:145px;
  108.     }
  109.     50% {
  110.         margin-left:180px;
  111.     }
  112.     100% {
  113.         margin-left:145px;
  114.     }
  115. }

 

 

HTML代码:

 

[html][/html] view plaincopyprint?

  1. <div id="timings-demo">
  2.         <a class="btn btn1" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
  3.         <a class="btn btn2" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
  4.         <a class="btn btn3" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
  5.         <a class="btn btn4" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
  6.         <a class="btn btn5" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
  7.     </div>

 

 

预览地址:http://www.leemagnum.com/dhsl.html

 

CSS3之动画Animation就为大家介绍到这里了。CSS3之过渡Transition的神奇之处远不止上面这些,还可以做很多好玩的小东东。在今后,想必CSS3之过渡 Transition的应用会很广泛,掌握CSS3之过渡Transition可谓是当务之急呀。更多关于CSS3的东东还望关注本blog有关CSS3 的更新哟。感谢大家长期以来对本blog的支持与厚爱。


本文固定链接: http://www.devba.com/index.php/archives/2994.html | 开发吧

报歉!评论已关闭.