CSS动画菜鸡记录板

---

 

Transition

过渡属性： (background 1s linear 0s)

缓动函数 linear，在 easings.net 可找到相应的功能

若想要多次不同执行，用逗号隔开

 

Animation & @keyframes

animation-name. @keyframes 的名字

animation-duration.动画执行时长

animation-timing-function.动画时间函数

animation-delay.动画执行延迟

animation-iteration-count.动画执行次数，infinite 无限循环

animation-direction.动画播放方向，reverse 反向执行，alternate

例子：

@keyframes name {...}

.box {

　　animation: name 1s ease-in-out 0s infinite

}