CSS3 卡通片属性(备忘)

CSS3 动画属性(备忘)

其实用CSS3实现动画效果

主要涉及到3个CSS3属性：transition，animation 和 transform

transition 

CSS3过渡属性，通过transition指定css属性，当该属性的值发生变化时，就会产生流畅的过渡效果。
transition主要包含四个属性值,分别为：
执行变换的属性：transition-property
变换延续的时间：transition-duration
在延续时间段，变换的速率变化：transition-timing-function
变换延迟时间：transition-delay

语法：

transition: property duration timing-function delay;
样式写法如下：

animation
这个属性十分强大，不需要任何JavaScript代码，就能实现循环的动画效果。
属性如下：
animation-name          //动画的名称。
animation-duration      //定义动画播放一次需要的时间。默认为0；
animation-timing-function      //定义动画播放的方式，参数设置类似transition-timing-function
animation-delay      //定义动画开始的时间
animation-iteration-count      //定义循环的次数，infinite即为无限次。默认是1。
-webkit-animation-direction     //动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。

写法如下：





transform
这个属性有很多功能，主要用来配合动画效果，结束以前需要使用top、left、bottom、right和margin等属性实现动画效果的日子。
另外，transform还支持3d！不过目前只在webkit浏览器上支持。

下面是transform的参数:
rotate   //Rotate(旋转)允许你通过传递一个度数值来转动一个对象。scale//Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。translate//Translate就是基于X和Y 坐标重新定位元素skew //顾名思义，skew就是要将对象倾斜，参数是度数matrix//transform支持矩阵变换，就是基于X和Y 坐标重新定位元素

rotate:让元素旋转



最后来一个Demo：http://jsfiddle.net/aUAQZ/2/embedded/result/
显示效果如下：（支持至Safari和Chrome，但不知道为什么，我家里的电脑Chrome不能正常显示，公司的却没问题）


来张会动的！



 

 

查看更多 下一篇