动画过渡效果

动画

使用动画必要的两个属性

1：动画名称 animation-name

2：动画持续时间 animation-duration

3：动画使用的速度函数 animation-timing-function

4.动画的播放次数 取值可以为具体次数 也可以为无限播放： animation-iteration-count

5.动画在下一次播放的方向： animation-direction 取值可以为normal默认 也可以为alternate(逆向播放）

6.动画执行完毕的状态： animation-fill-mode

动画保持最后的显示效果fowards

动画回到最初的显示效果backwards

7.动画延迟开始的时间： animation-delay

过渡效果

transition : all 1 s linear 3 s ;

参数1：用来指定对哪些属性使用过渡效果

参数2：过渡效果的持续时间

参数3：过渡效果的显示速度变化

参数4：用来指定过渡效果的延迟时间

hover

transform:translate:让元素发生偏移(180px，0）

transscale:让元素发生缩放(1.5)

rotate:让你的元素按照指定的中心进行旋转（180deg)