CSS3动画

移动端的开发也有这种hack，来解决可能的卡顿问题：

css-webkit-transform: translate3d(0, 0, 0);

css3动画大致分三类：

1.变形

• transform[变形基础]
• rotate()[旋转]
• scale()[缩放]
• translate()[位移]
• skew()[倾斜]
• matrix()[矩阵变形]
• perspective[透视] 

说明

transform属性能对元素对象进行变形操作，主要包括以下几种：旋转rotate、缩放scale、移动translate、倾斜skew以及矩阵变形matrix。

取值

none:表示不进行变换；

<transform-function>:表示一个或多个变换函数，以空格分开，因此可以同时对一个元素进行transform的多种属性操作。

• 1.rotate(<angle>):旋转元素
• 2.scale(<number>[, <number>]):缩放元素
• 3.translate(<translation-value>[, <translation-value>]):移动元素
• 4.skew(<angle> [,<angle>]):倾斜元素
• 5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩阵变形
• 6.perspective(length):透视

示例：transform:rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);

实例代码:

css

1. .demo_rotate{
   
2.     -webkit-transition:1s ease all;
   
3.     -moz-transition:1s ease all;
   
4.     padding:10px;
   
5.     margin:90px auto;
   
6. }
   
7. .demo_rotate:hover{
   
8.     -webkit-transform:rotate(360deg) scale(1.2,1.2);
   
9.     -moz-transform:rotate(360deg) scale(1.2,1.2);
   
10.     background:#ff9900;
    
11. }

  HTML

1. <div class="demo_box demo_rotate">鼠标经过变大1.2倍、旋转360度并改变背景色。</div>          

效果预览：http://runjs.cn/code/tom5me9d




2.过渡


• transition-property[过渡的CSS属性]
• transition-duration[过渡时间]
• transition-delay[延迟时间]
• transition-timing-function[过渡效果]




transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。http://www.w3.org/TR/css3-transitions/

transition可以和Transform同时使用。

transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。




实例代码

CSS

1. .transition_property_1{
   
2.     -webkit-transition:0.5s ease;
   
3.     -moz-transition:0.5s ease;
   
4.     -webkit-transition-property:all;
   
5.     -moz-transition-property:all;
   
6.     position:absolute;
   
7.     left:10px;
   
8.     top:50px;
   
9. }
   
10. .transition_property_2{
    
11.     -webkit-transition:0.5s ease;
    
12.     -moz-transition:0.5s ease;
    
13.     -webkit-transition-property:none;
    
14.     -moz-transition-property:none;
    
15.     position:absolute;
    
16.     left:250px;
    
17.     top:50px;
    
18. }
    
19. .transition_property_3{
    
20.     -webkit-transition:0.5s ease;
    
21.     -moz-transition:0.5s ease;
    
22.     -webkit-transition-property:width;
    
23.     -moz-transition-property:width;
    
24.     position:absolute;
    
25.     left:480px;
    
26.     top:50px;
    
27. }
    
28. 
    
29. .transition_property_1:hover,
    
30. .transition_property_2:hover,
    
31. .transition_property_3:hover{
    
32.     width:500px;
    
33.     height:300px;
    
34. }

1. <div class="demo_box transition_property_1">变换所有的属性</div>
2. <div class="demo_box transition_property_2">不变换任何属性</div>
3. <div class="demo_box transition_property_3">只变换宽度属性</div>

效果预览 ：http://runjs.cn/detail/s3k5rfg0

3.动画

• animation-name[动画名称]
• animation-duration[动画时间]
• animation-timing-function[播放方式]
• animation-delay[开始播放时间]
• animation-iteration-count[播放次数]
• animation-direction[播放方向]
• animation-fill-mode[播放后的状态]
• animation-play-state[对象动画的状态]

说明

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 如果提供多个属性值，以逗号进行分隔。

如何开始进行动画

@keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name，那么就可以执行动画了。定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：如：

@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}

复杂动画：

@-webkit-keyframes demo{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

这里面的百分百有点像flash里帧的概念。表示设置某个时间段内任意时间点的样式。    

实例代码

CSS

1. .animation_name{

2.     left:0;

3.     top:100px;

4.     position:absolute;

5.     -webkit-animation:0.5s 0.5s ease infinite alternate;

6.     -webkit-animation-name:demo;

7.     -moz-animation:0.5s 0.5s ease infinite alternate;

8.     -moz-animation-name:demo;

9. }

10. @-webkit-keyframes demo{

11.     0%{left:0;}

12.     100%{left:400px;}

13. }


HTML

1. <div class="demo_box animation_name">看我没事来回跑</div>                    

预览下效果：http://runjs.cn/code/uajpxech

关联属性

• transform-origin[变形原点]
• perspective-origin[透视原点]
• backface-visibility[隐藏内容的背面]
• transform-style[3D呈现]

说明

transform的参照点默认为元素的中心点，如果要改变这个参照点，可以是用transform-origin属性进行自定义。

受影响变形函数：rotate()。

1. .origin_1{

2.     -webkit-transform-origin:center center;

3.     -moz-transform-origin:center center;

4.     -webkit-transition:0.5s ease all;

5.     -moz-transition:0.5s ease all;

6.     position:absolute;

7.     left:10px;

8.     top:50px;

9. }

10. .origin_2{

11.     -webkit-transform-origin:left top;

12.     -moz-transform-origin:left top;

13.     -webkit-transition:0.5s ease all;

14.     -moz-transition:0.5s ease all;

15.     position:absolute;

16.     left:250px;

17.     top:50px;

18. }

19. .origin_3{

20.     -webkit-transform-origin:100% 100%;

21.     -moz-transform-origin:100% 100%;

22.     -webkit-transition:0.5s ease all;

23.     -moz-transition:0.5s ease all;

24.     position:absolute;

25.     left:480px;

26.     top:50px;

27. }

28. .origin_4{

29.     -webkit-transform-origin:20px 60px;

30.     -moz-transform-origin:20px 60px;

31.     -webkit-transition:0.5s ease all;

32.     -moz-transition:0.5s ease all;

33.     position:absolute;

34.     left:250px;

35.     top:160px;

36. }

37. .origin_1:hover,

38. .origin_2:hover,

39. .origin_3:hover,

40. .origin_4:hover{

41.     -webkit-transform:rotate(45deg);

42.     -moz-transform:rotate(45deg);

43. }                        


HTML

1. <div class="demo_box origin_1">在中心点旋转45度</div>
   
2. <div class="demo_box origin_2">在左上角旋转45度</div>
   
3. <div class="demo_box origin_3">用百分百值来来设置旋转点旋转45度</div>
   
4. <div class="demo_box origin_4">用长度值来设置旋转点旋转45度</div>                        

预览效果： http://runjs.cn/detail/alucwsnd

null

转载于:https://www.cnblogs.com/webfby/p/6124504.html