Transitions, Transforms和Animation使用简介

CSS3动画相关的几个属性是:transition, transform, animation;我分别理解为过渡,变换,动画。虽意义相近,但具体角色不一。

transition指过渡,就是从a点都b点,就像过江坐渡轮,是有时间的,是连续的,一般针对常规CSS属性;transform指变换,就那几个固定的属性:旋转啦,缩放啦,偏移啦什么的,独立于远房亲戚transition使用,但是,效果就是很干涩机械的旋转移动。要是配合transition属性,旋转啊什么的,就会很平滑。animation最先安家于Safari浏览器,自成一家,与transition和transform有老死不相往来之感,但是要说单挑的话,animation要比transition厉害些。


transition

其作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。于是乎,只要一个整站通用的class,就可以很轻松的渐进增强地实现动画效果,超有实用价值的说。

webkit内核浏览器下背景色过渡demo

transition有下面些具体属性:

transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

过渡类型的含义与flash中缓动类型(远不及flash丰富)是一致的

linear //线性过度
ease-in //由慢到快
ease-out //由快到慢
ease-in-out //由慢到快在到慢
cubic-bezier就是指贝塞尔曲线

不同缓动类效果demo


transform

transform就是指的这个东西,拉伸,压缩,旋转,偏移。

transform些属性效果demo

transform属性要是加上transition的过渡特性,那可就是如虎添翼,樱木花道配上流川枫啊,可以产生不少美妙的火花,例如下面这个例子

酷酷的缩放旋转动画demo


animations

截止2010年11月份,animations这物似乎还是只在webkit核心的浏览器上起作用,所以本段落的一些demo效果,需在webkit核心浏览器下查看,不在重复赘述。

animations水平弹性缩放变色动画

 

未完,待续


参考资料:

CSS3 transition实现超酷图片墙动画效果

CSS3 Transitions, Transforms和Animation使用简介与应用展示

posted on 2015-08-20 13:08  马斯科特  阅读(306)  评论(0编辑  收藏  举报

导航