动画

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它可以主动的触发,也可以重复发生。

posted @ 2021-12-18 21:07  小张111  阅读(45)  评论(0)    收藏  举报