H5动画效果

我们使用CSS3可以实现动画，主要的方式是通过animation 实现的。

animation属性

• animation-name ：动画的名称
• animation-duration：设置动画时间
• animation-iteration-count：设置动画次数，其中有一个属性infinite为无限循环
• animation-direction：设置动画是否应该反向，默认正常播放，默认值为normal，如果值为'alternate'时动画会在奇数次数正常播放
• animation-delay：设置动画延时，当要用到几个动画的先后顺序时，可以使用
• animation-timing-function： 设置动画结束的时候应用最后一帧的动画，linear线性过渡。ease平滑过渡。ease-in由慢到快。ease-out由快到慢
• animation-fill-mode：none默认值。forwords设置对象状态为动画结束时的状态。backwards设置状态为动画开始时的状态。both设置对象为动画结束或开始时的状态
• animation-play-state：设置动画的暂停与播放，running运动，paused暂停

那么这样说吧，我们不是要用到动画吗？那么动画的使用要在该元素中设置一个animation，而具体的动画操作我们需要用到@keyframes

例：

@keyframes changeColor{
    0%{
              background:blue;
        }
    50%{
        background: red;
    }
    100%{
                background:yellow;
    }

.box{
        animation: changeColor 2s infinite;
}

这样的话颜色的变化可能不是很明显，不过这样的话我们可以加上一个属性：

transition: all .8s;