阅读数:100 评论数:0

一、概述

html动画基本可以分为两类：css动画和js动画。css动画只能去做数值类的样式变化，遇到非数据类的变化，比如页面内容的变化，就需要使用js动画。

二、@keyframes

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

1、keyframes说明

（1）需要创建一个名字，这个动画的名字，后面绑定动画时会需要。

（2）from起始时，等同于0%

（3）to 到达终点时，等同于100%

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

三、animation

用于将动画绑定到某个选择器上。

1、animation-name

要绑定的keyframes动画名称

2、animation-duration

完成动画所需的时间，以少或毫秒计算

3、animation-timing-function 动画的速度曲线

（1）linear 等速

（2）ease  默认， 先慢后快，结束前再慢。

（3）ease-in  低速开始

（4）ease-out 低速结束

（5）ease-in-out 低速开始和结束

（6）cubic-bezier(n,n,n,n) 以贝塞尔曲线的方式

（7）steps(number,[jump-start|jump-end|jump-both|jump-none]) 分步动画

4、animation-delay 动画开始之前是否延迟时间

5、animation-iteration-count 动画播放次数

（1）n 定义次数

（2）infinite 无限次数播放

6、animation-direction 是否轮流反向播放动画

（1）normal 正常播放

（2）alternate 反向播放

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