CSS 动画例子

html中

<div id="d1"></div>

css中

/*声明动画*/
@keyframes scroll{
    0%{
        /*宽度，高度，背景颜色*/
        width:100px;
        height:100px;
        background:red;
    }
    25%{
        /*倒角，左外边距，背景颜色*/
        border-radius:50%;
        margin-left:200px;
        margin-top:0px;
        background:yellow;
    }
    50%{
        /*倒角，左外边距，上外边距，背景颜色*/
        border-radius:50%;
        margin-left:200px;
        margin-top:200px;
        background:blue;
    }
    75%{
        border-radius:50%;
        margin-left:0px;
        margin-top:200px;
        background:green;
    }
    100%{
        border-radius:0px;
        margin-top:0px;
        background:red;
    }
}

#d1{
    width:100px;
    height:100px;
    /*页面加载时，就实现动画效果*/
    animation-name:scroll; //动画名称
    animation-duration:5s; //动画时长
    animation-timing-function:linear; //动画速度时间曲线函数：
    animation-delay:5s; //动画延迟时间：5秒
    animation-iteration-count:infinite;//动画播放次数：无限循环
    animation-direction:alternate; //动画播放方向:奇数播放次数是正向播放，偶数播放次数时，逆向播放
    animation-fill-mode:both;//规定动画在播放之前或之后，动画效果是否可见:动画播放前后都采用填充模式
}
#d1:hover{
    animation-play-state:paused; // 规定动画的播放状态(运行或暂停)
}

以下是运行动图，会有5秒的延迟时间哦

初始样子：

25%时：

50%时：

75%：

注：

• animation-name: 指定调用动画的名称
• animation-duration:完成一个动画周期的时间:
  必须设置属性,s | ms 作单位
• animation-timing-function:完成动画时的速度时间曲线函数
• animation-delay:动画播放之前的延迟
• animation-iteration-count: 动画播放次数
  取值：
  1.数值
  2.infinite ：无限次播放
• aniamtion-direction: 动画播放方向
  取值：
  1.normal,默认值，正向播放(0%~100%)
  2.reverse,逆向播放(100%~0%)
  3.alternate,奇数播放次数是正向播放，偶数播放次数时，逆向播放
• 简写方式 animation
  animation:name duration timing-function delay interation-count direction;
• animation-fill-mode:规定动画在播放之前或之后，动画效果是否可见。
  取值：
  1.none:不改变默认行为
  2.forwards ：动画播放完成后，保持在最后一个 帧 的状态上
  3.backwards ：动画播放之前(延迟时间内)，保持在第一个 帧 的状态上
  4.both：动画播放前后都采用填充模式
• animation-play-state: 规定动画的播放状态(运行或暂停)
  取值：
  1.paused : 暂停
  2.running : 播放