css3 动画 @keyframes 和 animate

@keyframes 和 animate 

---

@keyframes 用来改变动画的轨迹或效果(利用某项css 创建所需动画)

 keyframes说明：

• 需要创建一个名字，这个动画的名字，后面绑定动画时会需要
• form  起始时,等同于 0%
• to      到达终点时，等同于100%

@keyframes leftMove{
    from{
        margin-left:0px;
    }
    to{
        margin-left:200px;
    }
}
@keyframes bgColor{
    0%{
        background:red;
    }
    50%{
        background:#000;
    }
    100%{
        background:#ff0;
    }
}

animate 当将动画绑定到某个选择器上时所需要，不然不会产生动画

animate 属性说明：animation: name duration timing-function delay iteration-count direction;

• animation-name ：      要绑定的 keyframes 动画名称
• animateion-duration：完成动画所需的时间，以秒或毫秒计算
• animateion-timing-function：动画的速度曲线
  • linear：从始至终保持动画的平速相同
  • ease： 默认。动画先慢后快结束前在慢
  • ease-in： 动画以低速开始
  • ease-out：动画以低速结束
  • ease-in-out：以低速开始和结束
  • cubic-bezier(n,n,n,n)：自由设置，值为0-1之间
• animateion-delay：动画开始之前是否延迟时间
• animateion-iteration-count：动画播放次数
  • n ：定义次数
  • infinite：无限次数播放
• animation-direction：是否轮流反向播放动画
  • normal：正常播放
  • alternate：反向播放

.animate{
  width:100px;
  height:100px;
  background:#aaa;
  animation: leftMove 4s cubic-bezier(0.3,0.5,0.8,1);
}

⚠️  当我们在选择器中绑定动画的时候，最少要写 name(动画名称)和 duration(动画结束时间)