css(4)animation动画总结

---

前言

学好css3的动画animation属性很重要，我们可以做到许多类似的效果（平移，旋转，缩放）
参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

---

一、@keyframes关键帧

通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤
参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes

1.from{}to{}

@keyframes name{
   
    from {
   background: red;}
    to {
   background: yellow;}
}

from等价于0%，on等价于100%

2.0%{}100%{}

@keyframes name{
   
    0% {
   background: red;}
    100% {
   background: yellow