animation

https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation/

animation：动画，使用CSS3 @keyframes规则

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]

animation-name: 定义动画名称   

animation-duration: 指定元素播放动画所持续的时间长   

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)： 指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。   

animation-delay: 指定元素动画开始时间   

animation-iteration-count:infinite | <number>：指定元素播放动画的循环次   

animation-direction: normal | alternate： 指定元素动画播放的方向，只有两个值，默认值normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。   

animation-play-state:running | paused：控制元素动画的播放状态。 

---

1.将一个div进行移动，速度先快后慢，duration为5秒

2.如何实现一个小球的上下跳动

css3的animation+@keyframes

使用什么属性设置？

background定位，绝对定位top和bottom，margin，translate

3.实现圆形进度条