关于css3 transition transform animation属性

1，transition属性

个人非常习惯用transition过度属性，简单易用。大家称他为animation简化版本。

例如：

.contain{

width: 392px;

position: relative;

bottom: -20px;

opacity: 0;}

.contain.on{

bottom: 0;

opacity: 1;

-webkit-transform:translate(-100px,100px);

transition:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;

-webkit-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;

-moz-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;

-ms-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;

-o-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out; }

当符合某种条件时为contain添加.on类，即可有立即x移动-100px,y移动100px,历时1500ms;延时2s 历时500ms的“由下往上 由透明变为实体”的动画效果。注意针对性写，而不是写all ease-in 500ms;性能太低

语法：

transition: property duration timing-function delay;

但是需要注意的是：火狐浏览器对于transition最后一个数值要求很严格，如果延时为0时我们往往会忽略后面的S，则火狐上无效果！

transition 遇到的特殊问题：

.aa完成设定动作之后会恢复原样，换做animation 设置forwards属性依旧会恢复原样。

解决方案：将.aa{display:inline-block;}或者设置为display：block；

2，animation属性

animation属性比transition属性多包含keyframes规则显式控制当前帧的属性，因而更加灵活。

举例：

@keyframes guideDown{

0%,100%{background-position: 0 -352px;}

50%{background-position: 0 -360px;}

}

@-webkit-keyframes guideDown{

0%,100%{background-position: 0 -352px;}

50%{background-position: 0 -360px;}

}

@-ms-keyframes guideDown{

0%,100%{background-position: 0 -352px;}

50%{background-position: 0 -360px;}

}

@-moz-keyframes guideDown{

0%,100%{background-position: 0 -352px;}

50%{background-position: 0 -360px;}

}

.moveDiv{

animation:guideDown 2s infinite;

-webkit-animation:guideDown 2s infinite;

-moz-animation:guideDown 2s infinite;

-ms-animation:guideDown 2s infinite;

-o-animation:guideDown 2s infinite;

}

infinite是指无限次循环，如果只执行一次，只需限定animation-fill-mode:forwards即可。

语法：

animation: name duration timing-function delay iteration-count direction;

timing-function状态变化速度除了ease linear之外还有cubic-bezier定制速度，定制网站http://cubic-bezier.com/#.17,.67,.83,.67。

还有一种是匀速只需要关键帧跳跃，此时采用steps过渡方式。只需要定义开始结束keyframe自动根据steps（n）分配关键帧；

delay可以为负值，动画立即执行，但是跳过指定delay值规定时间进入动画，

3，transform属性

transform看似是动画属性，其实是静态属性，写到style里只会直接显式，无变化过程。其用途主要用于特殊变形，定义多种静态样式，然后通过transition和animation制定如何改变属性值，进而实现动画效果。

其改变属性样式的属性有：translate3d（3d位置），rotate（旋转），skew（倾斜度），scale（放大缩小），matrix（css矩阵）。

语法：

transform: none|transform-functions;

PS：为动画DOM元素添加样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform:translateZ其实是为了渲染3D样式，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。引用自：http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

另： 配合absolute，left：50%，top:50%之后设置 -webkit-transform: translate(-50%, -50%);可保证水平垂直居中

很多动画效果要结果多个属性实现。

例如画圆球椭圆轨迹运动需要圆球transform：rotate(1turn)的同时外层div translateY(200px)实现