css animation动画完成后隐藏_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 动画应该轮流反向播放。

这个先介绍到这里吧，下面分享几个demo！！！

1、animation1

---

喜欢前端的小伙伴们可以在评论区留言，寻找和小冯童鞋一样热爱前端的友人，让我们一起玩转前端的世界！