从零开始的css3动画 动画

   定义动画：
        @keyframes 动画名{
            from{ 初始状态 }
            to{ 结束状态 }
        }
 
     调用：
      animation: 动画名称 持续时间；

 animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)
 
（1）动画名称：,animation-name: move;
（2）执行一次动画的持续时间：animation-duration: 4s;
备注：上面两个属性，是必选项，且顺序固定。
（3）动画的执行次数： animation-iteration-count: 1;       //iteration的含义表示迭代
属性值infinite表示无数次。

（3）动画的方向：animation-direction: alternate;
属性值：normal 正常，alternate 反向。
（4）动画延迟执行：animation-delay: 1s;
（5）设置动画结束时，盒子的状态：animation-fill-mode: forwards;
属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。
（6）运动曲线： animation-timing-function: ease-in;
属性值可以是：linear ease-in-out steps()等。
注意，如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。

//api介绍结束

		div {
			width:3px;
			height:200px;
			background-color: #000;
			margin:100px auto;
			transform-origin: center bottom;
			animation:clock 60s steps(60) infinite;
		}
		@keyframes clock{
			0% {
				transform:rotate(0deg);
			}
			100% {
				transform:rotate(360deg);
			}
		}

//摇摆的时钟