动画
css的transition。
transition: property duration timing-function delay;
property:填写需要变化的css属性如:width,line-height,font-size,color等;
duration:完成过渡效果需要的时间(2s 或者2000ms)
transition抓住了所设置变化属性的起始态和完成态,通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性,默认为all,则所有变化的属性都会在出发时,以动画的形式展现出来。
这种动画方式是css3的,因此ie9以下是不支持的,其他的浏览器需要加前缀,并且只有两态,不支持自定义中间的状态。
关键帧动画(Animation)
使用关键帧@keyframes,在关键帧里面的写法如下:
在每一个阶段我们可以定义不同的元素状态,也就是css,这样就大大增强了css的动画能力。
总结起来就是:可以定义多个状态,可以实现更复杂的效果,相对于transition它可以主动的触发,也可以重复发生。