关于css3 transition transform animation属性

标签：transition animation   transform css3 火狐浏览器   

1，transition属性

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

例如：

.contain{

width: 392px; 

position: relative; 

bottom: -20px; 

opacity: 0;}

.contain.on{ 

bottom: 0; 

opacity: 1;

 transition:all 500ms ease-out 2s; 

 -webkit-animation:all 500ms ease-out 2s;

-moz-animation:all 500ms ease-out 2s;

-ms-animation:all 500ms ease-out 2s;

-o-animation:all 500ms ease-out 2s;}

当符合某种条件时为contain添加.on类，即可有延时2s 历时500ms的“由下往上 由透明变为实体”的动画效果。

语法：

transition: property duration timing-function delay;

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

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;

3，transform属性

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

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

语法：

transform: none|transform-functions;

关于css3 transition transform animation属性

标签：transition animation   transform css3 火狐浏览器   

原文地址：http://blog.csdn.net/liu__hua/article/details/42534719