Animations功能（区别于Transitions)

Posted 2020-08-05 学海泛舟拾贝

CSS3实现动画：

   1  Transitions：定义元素的某个属性从一个属性值平滑过渡到另一个属性值。

Transitions属性的使用方法如下所示：

transition: property | duration  | timing-function | delay

transition-property: 表示对那个属性进行平滑过渡。

transition-duration: 表示在多长时间内完成属性值的平滑过渡。

transition-timing-function 表示通过什么方法来进行平滑过渡。

transition-delay: 定义过渡动画延迟的时间。

默认值是 all  0  ease  0

浏览器支持程度：IE10，firefox4+，opera10+，safari3+及chrome8+

     实例1：

     html：

1 <div id="transBox" class="trans_box">
2     <div class="trans_list ease">ease</div>
3     <div class="trans_list ease_in">ease-in</div>
4     <div class="trans_list ease_out">ease-out</div>
5     <div class="trans_list ease_in_out">ease-in-out</div>
6     <div class="trans_list linear">linear</div>
7 </div>

     CSS：

 1 .trans_box {
 2     background-color: #f0f3f9;
 3 　　width:100%
 4 }
 5 .trans_list {
 6     width: 30%;
 7     height: 50px;
 8     margin:10px 0;
 9     background-color:blue;
10     color:#fff;
11     text-align:center;
12 }
13 .ease {
14     -webkit-transition: all 4s ease;
15     -moz-transition: all 4s ease;
16     -o-transition: all 4s ease;
17     transition: all 4s ease;
18 }
19 .ease_in {
20     -webkit-transition: all 4s ease-in;
21     -moz-transition: all 4s ease-in;
22     -o-transition: all 4s ease-in;
23     transition: all 4s ease-in;
24 }
25 .ease_out {
26     -webkit-transition: all 4s ease-out;
27     -moz-transition: all 4s ease-out;
28     -o-transition: all 4s ease-out;
29     transition: all 4s ease-out;
30 }
31 .ease_in_out {
32     -webkit-transition: all 4s ease-in-out;
33     -moz-transition: all 4s ease-in-out;
34     -o-transition: all 4s ease-in-out;
35     transition: all 4s ease-in-out;
36 }
37 .linear {
38     -webkit-transition: all 4s linear;
39     -moz-transition: all 4s linear;
40     -o-transition: all 4s linear;
41     transition: all 4s linear;
42 }
43 .trans_box:hover .trans_list{
44     margin-left:90%;
45     background-color:#beceeb;
46     color:#333;
47     -webkit-border-radius:25px;
48     -moz-border-radius:25px;
49     -o-border-radius:25px;
50     border-radius:25px;
51     -webkit-transform: rotate(360deg);
52     -moz-transform: rotate(360deg);
53     -o-transform: rotate(360deg);
54     transform: rotate(360deg);
55 }

      demo演示如下：

ease

ease-in

ease-out

ease-in-out

linear

  * 可以为平滑过渡设置多个属性值。

     实例2：

     HTML：

 1 <div class="transitions2">transitions平滑过渡多个属性值</div> 

     CSS ：

 

 1 .transitions2 {
 2         background-color:#ffff00;
 3         color:#000000;
 4         width:300px;
 5         -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
 6         -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
 7         -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
 8 }
 9 .transitions2:hover {
10         background-color: #003366;
11         color: #ffffff;
12         width:400px;
13 }

 

    demo演示如下：

transitions平滑过渡多个属性值

 

2 Animations:

      可以通过定义多个关键帧以及定义每个关键帧中元素的额属性值来实现更为复杂的动画效果。

语法：animations: name duration timing-function iteration-count;

name: 关键帧集合名（通过此名创建关键帧的集合）

duration: 表示在多长时间内完成属性值的平滑过渡

timing-function: 表示通过什么方法来进行平滑过渡

iteration-count: 迭代循环次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1.

用法：@-webkit-keyframes 关键帧的集合名 {创建关键帧的代码}

    实例：

   HTML：

 1 <div class="animate">使用animate实现更为复杂的动画</div> 

   CSS：

 1 .animate {background-color:red;height:100px;}
 2 @-webkit-keyframes mycolor {
 3     0% {background-color:red;}
 4     40% {background-color:darkblue;}
 5     70% {background-color: yellow;}
 6     100% {background-color:red;}
 7 }
 8 @-moz-keyframes mycolor {
 9     0% {background-color:red;}
10     40% {background-color:darkblue;}
11     70% {background-color: yellow;}
12     100% {background-color:red;}
13 }
14         
15 .animate:hover {
16     -webkit-animation-name: mycolor;
17     -webkit-animation-duration: 5s;
18     -webkit-animation-timing-function:linear;
19 
20     -moz-animation-name: mycolor;
21     -moz-animation-duration: 5s;
22     -moz-animation-timing-function:linear;
23 }

    演示demo如下：

使用animate实现更为复杂的动画

 

（感谢-空智）