CSS3动画动画

1，@关键帧定义关键帧动画
2，animation-name动画名称
3，animation-duration动画时间
4，animation-timing-function动画曲线

  • 线性匀速
  • 缓解开始和结束慢速
  • ease-in开始是慢速
  • 缓解结束时慢速
  • 易于进入开始和结束时慢速
  • 步骤动画步数

5，animation-delay动画延迟
6，animation-iteration-count动画播放次数n | infinite
7，animation-direction

  • 正常默认动画结束不返回
  • 备用动画结束后返回

8，animation-play-state动画状态

  • 暂停停止
  • 运行运动

9，animation-fill-mode动画前后的状态

  • none不改变默认行为
  • forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
  • backwards在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
  • 向前和向后填充模式都被应用

10，动画：名称持续时间定时函数延迟迭代计数方向;同时设置多个属性

举例:(人物走路动画） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画</title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/walking.png"></div>
</body>
</html>

动画中使用的图片如下：

results matching ""

    No results matching ""