关于动画.我们学习分为三大点:
? 一.过渡动画.即 2 d 变换
所谓过渡动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。
? 过渡(transition)本身需要定义参数.否则,看不到效果.我们学到的可定义的参数有以下几点:
? transition-property:规定对哪个属性进行过渡。
? transition-duration:定义过渡的时间,默认是0。
? transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出等。
? linear 规定以相同速度开始至结束的过渡效果。
? ease(默认值)规定慢速开始,然后变快,然后慢速结束的过渡效果。
? ease-in 规定以慢速开始的过渡效果。
? ease-out 规定以慢速结束的过渡效果。
? ease-in-out 规定以慢速开始和结束的过渡效果
? transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0。
?
transform(变形) (2 d中新学到的几个属性)
? 1)缩放变换transform:scale(水平,垂直)
*取值:表示倍数
*变换的基准点在元素中间
*scale-x,scale-y变换不同的轴
? 2)旋转变换 transform:rotate(角度deg)
*顺时针为正方向
*旋转的基准点在元素的中心
*可以取负数
? 3)偏移变换transform:skew(x轴偏移角度,y轴偏移角度)
*transform: skew X x轴偏移以逆时针为正
*transform: skew Y y轴偏移以顺时针为正
? 4)变换的基准点transition-origin:水平方向 垂直方向
*数值,百分比
*方位
? 要想改变元素原有的状态,课堂上老师主要介绍了以上四种方式.当然也还有大小、位置、颜色等属性.
? 在改变状态以后,要想动画能以一种更加舒适的方式去平滑过渡,需要给被改变状态的元素添加过渡()transition)属性.然后还需要给元素定义一个类,也就是需要用户的行为去触发.我们最常用hover的方式去触发.除此之外,还有focus,checked媒体查询等触发方式.
? 过渡动画让页面更加的人性化,大大提升了用户的体验,但是,也有它的缺点,就是需要人为的去触发,所以没办法在网页加载的时候自动发生,而且它是一次性的.没办法重复,最后,它只有两个状态,也就是开始状态和结束状态,我们无法给它定义中间的状态.因此.就有了接下来的关键帧动画.
? 二.关键帧动画.
? 关键帧动画的出现,完美的解决了上述过渡动画的缺点,它既可以定义动画自动发生,也可以无限重复,以及我们可以定义它中间过渡的状态.
? 要实现关键帧动画,我把它分为4个步骤 : 1.通过@keyframs自定义动画 2.通过百分比将动画序列分割成多个节点 3.在各节点中分别定义各属性 4.通过animation将动画应用于相应的元素
? 这里有两个新的属性, @keyframes(关键字) 以及 animation(动画)
? @keyframes的格式为:@keyframes 动画名称 { 时间点 {元素状态} 时间点 {元素状态} …}
? animation属性类似于transition,他们都是随着时间变化而改变元素的属性值,其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。
同样的,animation也有对应参数,我们主要学习了以下几点:
? animation-duration:默认值为0s,意味着动画周期为0s,也就是没有任何动画效果。
? animation-timing-function:与transition-timing-function一样。
? animation-delay:在开始执行动画时需要等待的时间。
? animation-iteration-count:定义动画的播放次数,默认为1,如果为infinite,则无限次循环播放。
? animation-direction:默认为nomal,每次循环都是向前播放,(0-100)。另一个值为alternate,动画播放为偶数次则向前播放,如果为基数词就反方向播放。
? animation-state:默认为running,播放,paused,暂停。
? 三.3 D变换.
3d变换,在某种程度上,我理解为,相较于2 d变换属性,多了一个Z轴的方向.它可以给用户一种立体的感觉.让动画看起来更加的真实.它同样需要设置一些样式.
比如:transform-style:【flat(默认平面) preserve-3 d保持3 d变换】。
perspective:设置观察的距离,景深.设置值越大,站的位置越远。
如果要实现3 d变换,这两个样式需要同时写,而且都是作用在父元素身上,最后如果想要看到效果,父元素也需要有变换,否则,我们是看不到效果的.
三种方式,各有各的优点.主要是看我们想要一种什么样的效果.然后再去选择用哪种方式去实现.
原文地址:http://blog.51cto.com/14071672/2322768