【CSS学习笔记】CSS动画效果实战

内容参考自：https://juejin.im/entry/59b15307518825244c0d2493

animation属性：

• animation-name ：需要绑定的keyframe名称
• animation-duration：动画持续时间
• animation-timing-function：动画的运动曲线，linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier（）,steps（）
• animation-delay：动画开始之前的延时
• animation-iteration-count：重复次数
• animation-direction：是否轮流反向播放动画，值normal,默认正常播放；alternate轮流反向播放
• animation-fill-mode：控制元素在动画执行前与动画完成后样式。none：使用得动画不会对动画等待和动画完成的元素样式产生改变；forwards：动画结束后，元素的样式将设置为动画的最后一帧的样式；backwards：在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式；both：在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式著作权归作者所有。

皮球掉地反弹

主要利用贝塞尔曲线和ease控制动画效果。贝塞尔曲线控制速度曲线，ease使得每个阶