一、前言 CSS3动画相关的几个属性是:transition, transform, animation;分别理解为过渡,变换,动画。虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异。 transition指过渡,就是从a点都b点,是有时间的,是连续的,一般针对常 ...
一、前言
CSS3动画相关的几个属性是:transition, transform, animation;分别理解为过渡,变换,动画。虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异。
transition指过渡,就是从a点都b点,是有时间的,是连续的,一般针对常规CSS属性;transform指变换,包含几个固定的属性:旋转、缩放、偏移等等,但是,效果就是很干涩机械的旋转移动,如果配合transition属性,变换就会很平滑。animation最先使用于Safari浏览器,在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西:keyframes。
二、Transition
CSS3 transition属性是一个简单的动画属性,可以说它是animation的简化版本,是给普通做简单网页特效用的,其作用是:平滑地改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。所以对于一个整站通用的class,可以很轻松的渐进增强地实现动画效果,很有实用价值。
比如你有以下两个样式:
.position{ left:100px; top:100px;}.animate{ -webkit-transition:left 0.5s ease-out; left:500px; top:500px;}
在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是css 的图形变形工具。
关于图形变形的基础条件当中的原点设定,在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css作用的元素的左上角为0,0来计算的(有待研究)。其他的属性则根据这个属性来计算进行计算。
关于图形变化的模式,css3标准当中transform-style来定义。默认是flat,展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说,应该只需要preserve-3d就好了,但是从谣传“开启了perserve-3d就使用了GPU加速”来说,这个属性可能是为了降低系统消耗用的,毕竟3d比2d要多一个维度的计算。
如果需要使用3d模式,必须先指定style为3d,并在任意父元素上增加 perspective 及perspective-origin 来指定透视点。
具体的给设计师改变元素样式用的属性则有以下五个:
translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的;
rotate(deg)是用来控制元素旋转角度的;
skew[x,y](deg) 这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在2d里面创建3d透视图的时候必须的属性;
scale3d(x,y,z) 用来放大缩小效果,属性是比值;
matrix3d,css矩阵。通过这个矩阵属性,涵盖了上面所有的属性值,但是个人觉得可读性极差(全都是数字和单位,背起来有点模糊),目前没有理由推荐使用。
总体看来 css transform的属性和原来使用的left ,right ,top, bottom 的属性从动静角度来说没有任何区别,因此使用的时候应该将transform归类到这类定位变形的静态属性里面。
四、Animations
做过Flash动画的人都会知道,Flash里面有两个基础武器:时间轴和关键帧。而css keyframes的出现,则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例:
@keyframes 'wobble'{ 0%{ left:100px} 30%{ left:300px;} 100%{ left:500px;}}.animate{ left:100px; -webkit-animation:wobble 0.5s ease-out; -webkit-animation-fill-mode:backwards;}
原标题:CSS3 Transitions, Transforms和Animation的使用
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。