Animations功能(区别于Transitions)

Posted 学海泛舟拾贝

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Animations功能(区别于Transitions)相关的知识,希望对你有一定的参考价值。

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实现更为复杂的动画

 

(感谢-空智)

以上是关于Animations功能(区别于Transitions)的主要内容,如果未能解决你的问题,请参考以下文章

Animations in UWP Community Toolkit - Overview

[Angular Tutorial] 14 -Animations

实战使用 Web Animations API 实现一个精确计时的时钟

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

iOS中动画组、过渡动画

UIView.animateWithDuration:animations:completion: 在 XCTest 中被取消