整体介绍
过渡 1)过渡的基本使用 2)过渡的缓动效果 3)过渡效果实战课 动画 1)动画的定义和调用 2)动画效果实战课
过渡的基本使用
transition过渡
transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”
兼容性
过渡从IE10开始兼容，移动端兼容良好 曾几何时，网页上的动画特效基本都是由]avaScript定时器实现的，现在逐步改为使用CSS3过渡 优点：动画更细腻，内存开销小
transition属性基本使用
transition属性有4个要素
哪些属性可以参与过渡
- 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius
- 背景颜色和文字颜色都可以被过渡
- 所有变形(包括2D和3D)都能被过渡
all属性
如果要所有属性都参与过渡，可以写all
注意不要滥用，会引发效率问题
过渡的四个小属性
过渡的缓动效果
transition的第三个参数就是缓动参数，也是变化速度曲线
贝塞尔曲线
网站https://cubic-bezier.com/可以生成贝塞尔曲线,可以自定义动画缓动参数
动画的定义和调用
动画的定义
可以使用@keyframes来定义动画，keyframes表示”关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀
动画的调用
定义动画之后，就可以使用animation属性调用动画
动画的执行次数
第五个参数就是动画的执行次数
如果想永远执行可以写infinite
alternate和forwards
如果想让动画的第2、4、6…（偶数次）自动逆向执行，那2么要加上alternate参数即可
如果想让动画停止在最后结束状态，那么要加上forwards
多关键帧动画
