标签：效果 min mat 无限 sed 循环 pause 也有 alter
关于动画.我们学习分为三大点:? 一.过渡动画.即 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变换,这两个样式需要同时写,而且都是作用在父元素身上,最后如果想要看到效果,父元素也需要有变换,否则,我们是看不到效果的.
三种方式,各有各的优点.主要是看我们想要一种什么样的效果.然后再去选择用哪种方式去实现.
标签：效果 min mat 无限 sed 循环 pause 也有 alter
原文地址：http://blog.51cto.com/14071672/2322768
