transform - transition - animation

ok,此文主要是把关于css3的动画一些东西给理清楚。此文仅作基础入门,包括: trasnform、transition、animation。

transform

语法

transform: none | <transform-function>[<transform-function>]*

语法项目 说明
初始值 none
适用于 块元素和行内元素
可否继承
媒介 视觉
版本 CSS3.0


说明

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);  

transition

transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。http://www.w3.org/TR/css3-transitions/ transition可以和Transform同时使用。 transition是一个复合属性,可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。  

animation

animation-name[动画名称] animation-duration[动画时间] animation-timing-function[播放方式] animation-delay[开始播放时间] animation-iteration-count[播放次数] animation-direction[播放方向] animation-fill-mode[播放后的状态] animation-play-state[对象动画的状态]   总结: 1.兼容性:使用前缀  -webkit  -moz    如: -webkit-transform       -moz-transition      -webkit-keyframes 2.transform中的重点是 矩阵变形    ,当然关键点是3D变形。使用透视进行3d变形。 3.transition主要与transform配合使用,体现一个变化的过程。 4.animation更会出现问题。可以做更多的动画效果,transform  , transition ,animation配合来做出强大的动画效果。 5. [css]-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s; transition:width 2s, height 2s, background-color 2s, transform 2s;[/css] 对每一个属性值进行单独控制。用逗号","来间隔。 6.要使用多个transform:  transform: rotateX(360deg) scale(1.5,1.5); 属性值使用空格间隔。  
  要说的东西也就这么多,还是要多写才能用好。 自己写文章是越来越水了,得不得啊,要不得。 参考连接: 1.http://isux.tencent.com/css3/?animation-fill-mode 2.https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions 3.http://blog.jobbole.com/56243/ 4.http://beiyuu.com/css3-animation/ 5.https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations 6.http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 7.http://blog.alexmaccaw.com/css-transitions