css animation 常用的动画效果

最近项目需要，需要写一些动画效果，然后对animation的知识巩固了一下。

animation

animation-name 需要绑定到选择器的 keyframe 名称

animation-duration 完成动画所需要的时间

animation-delay 设置延长时间

animation-timing-function 动画的运动速度

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-iteration-count 动画播放的次数

infinite 规定动画应该无限次播放。

animation-direction 轮流反向播放动画

normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。

--- 好吧 这个就介绍到这里吧 如果还有什么疑问可以自己去了解一下

1.animation1

2.animation2

3.animation3

4.animation4

5.animation5