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

<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

.transition_property_1{
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -webkit-transition-property:all;
    -moz-transition-property:all;
    position:absolute;
    left:10px;
    top:50px;
}
.transition_property_2{
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -webkit-transition-property:none;
    -moz-transition-property:none;
    position:absolute;
    left:250px;
    top:50px;
}
.transition_property_3{
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -webkit-transition-property:width;
    -moz-transition-property:width;
    position:absolute;
    left:480px;
    top:50px;
}

.transition_property_1:hover,
.transition_property_2:hover,
.transition_property_3:hover{
    width:500px;
    height:300px;
}

<div class="demo_box transition_property_1">变换所有的属性</div>
<div class="demo_box transition_property_2">不变换任何属性</div>
<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

.animation_name{
    left:0;
    top:100px;
    position:absolute;
    -webkit-animation:0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation:0.5s 0.5s ease infinite alternate;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    0%{left:0;}
    100%{left:400px;}
} 

HTML

<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()。

.origin_1{
    -webkit-transform-origin:center center;
    -moz-transform-origin:center center;
    -webkit-transition:0.5s ease all;
    -moz-transition:0.5s ease all;
    position:absolute;
    left:10px;
    top:50px;
}
.origin_2{
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    -webkit-transition:0.5s ease all;
    -moz-transition:0.5s ease all;
    position:absolute;
    left:250px;
    top:50px;
}
.origin_3{
    -webkit-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -webkit-transition:0.5s ease all;
    -moz-transition:0.5s ease all;
    position:absolute;
    left:480px;
    top:50px;
}
.origin_4{
    -webkit-transform-origin:20px 60px;
    -moz-transform-origin:20px 60px;
    -webkit-transition:0.5s ease all;
    -moz-transition:0.5s ease all;
    position:absolute;
    left:250px;
    top:160px;
}
.origin_1:hover,
.origin_2:hover,
.origin_3:hover,
.origin_4:hover{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
}                        

HTML

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

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

null