你的位置:首页 > 软件开发 > 网页设计 > CSS3 Transitions, Transforms和Animation的使用

CSS3 Transitions, Transforms和Animation的使用

发布时间:2016-10-25 20:00:10
一、前言  CSS3动画相关的几个属性是:transition, transform, animation;分别理解为过渡,变换,动画。虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异。  transition指过渡,就是从a点都b点,是有时间的,是连续的,一般针对常 ...

CSS3 Transitions, Transforms和Animation的使用

一、前言

  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

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。