CSS动画
过渡
transition 属性 过渡 可以为一个元素在不同样式之间变化自动添加'补间动画'
transition : width 1s linear 0s
需要过渡的属性 | 动画时长 | 变化速度曲线,linear匀速 | 动画开始的延迟时间
transition-property | transition-duration | transition-timing-function | transition-delay
四个属性可以如上合并设置,也可以单独设置
ps:
从ie10开始兼容,移动端兼容良好
网页动画特效由js定时器逐步改为css3过渡 -> 动画更细腻,内存开销小
可以参与过渡的属性:
所有数值类型的属性,都可以参与过渡,比如width,height,left,top,border-radius
背景颜色和文字颜色都可以被过渡
所有变形(包括2D和3D)都能被过渡
需要过渡的属性也可以写为all,表示所有属性都参与过渡
过渡的缓动效果
transition-timing-function
ease | linear | ease-in | ease-out | ease-in-out
两头慢,中间快 | 匀速 | 逐渐加快 | 逐渐变慢 | 两头慢,中间快,更为平缓
也可以根据贝塞尔曲线设置 cubic-bezier(0.1,0.7,1.0,0.1)
贝塞尔曲线生成参考网址 : https://cubic-bezier.com/,可自定义动画变化速率
![在这里插入图片描述](https://img-blog.csdnimg.cn/c58b4b74cab64c5a8290b812d1059d0f.png#pic_center)
动画的定义和调用
@keyframes 定义动画 keyframes表示关键帧
animation 调用动画
动画名字 | 总时长 | 变化速度曲线 | 动画开始的延迟时间 | 执行次数
alternate | forwards | infinite | 阿拉伯数字
动画的偶数次自动逆向执行 | 动画停止在最后结束状态 | 动画永久执行 | 动画执行次数
多关键帧动画
![在这里插入图片描述](https://img-blog.csdnimg.cn/e873b35d9c0d4f60918b1b39d196589a.png#pic_center)