css3动画会转动的骨头

下面我们先来了解一下animation的一些属性，方便我们后面使用。
Animation属性与关键帧@keyframes在CSS3动画里结合起来用的并且使用率使用率很高的一种制作动画的方法。如截图中可见animation最基础的一些属性。其中动画的时长与名称是必须要定义的否则这段动画就不能被允许，因为时长的默认值是0。
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”.
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode 规定对象动画时间之外的状态

<div class="bon">
		<div class="bone"></div>
	</div>
	<div class="turn">
		<div class="run"></div>
	</div>
</body>

.bon{
	width:500px;
	height:500px;
	background:#AF8FDE;
	margin:100px auto 0px;
}
.bone{
	width:400px;
	height:400px;
	background:url("img/shape-2.png") no-repeat 90px 90px;
	margin:0px auto;
	transform: rotateY(180deg);
	animation-duration: 15s;/*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
	animation-name: zi;/*规定 @keyframes 动画的名称*/
	animation-iteration-count:infinite;/*规定动画被播放的次数。默认是 1。*/
	}
@keyframes zi{
			/*0%*/from{
				 transform: rotateY(0deg);
				 -webkit-transform: rotateY(0deg);
				 -moz-transform: rotateY(0deg);
				 -o-transform: rotateY(0deg);
				 -ms-transform: rotateY(0deg);
			}
			/*100%*/to{
				transform: rotateY(-360deg);
				-webkit-transform: rotateY(360deg);
				-moz-transform: rotateY(360deg);
				-o-transform: rotateY(360deg);
				-ms-transform: rotateY(360deg);
			}
		}

在截图中可以看到有许多内容相同但带有不同前缀的代码语句，这其中就是考虑到兼容性的问题了，为了方便在其他的浏览器也可以打开观看而设定的。
在代码里面可以看到rotateY(deg)这圈代码，意思就是骨头所转动的角度与方向。



这就是完成效果后骨头转动的一些效果。