css3 animation关键帧和transform转换实现旋转动画

css3 animation关键帧和transform转换实现旋转动画

效果：内环顺时针旋转，外环逆时针旋转

思路：用两张图片（内圈和外圈各一张），使用keyframes定义两组动画，内环使用transform:rotate定义顺时针转换，外环定义逆时针转换
代码：

@-webkit-keyframes rotation1 {
	from
   {
		-webkit-transform: rotate(360deg);
	}
   to
   {
	   -webkit-transform: rotate(0deg);
   }
}
@-webkit-keyframes rotation2 {
	from {
		-webkit-transform: rotate(0deg);
	}to {
			 -webkit-transform: rotate(360deg);
		 }
}
.comm-blue-yuan{
	width: 150px;
	height: 150px;
	background: url("/static/images/wai-yuan.png");
	background-size: 100% 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;

	-webkit-transform: rotate(360deg);
	animation-name: rotation1;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	//animation: rotation1 5s linear infinite;
	//-moz-animation: rotation1 5s linear infinite;
	//-webkit-animation: rotation1 5s linear infinite;
	//-o-animation: rotation1 5s linear infinite;
}
.comm-nei-yuan{
	width: 109px;
	height: 109px;
	background: url("/static/images/nei-yuan 25.png");
	background-size: 100% 100%;
	position: absolute;
	top: 60px;
	left: 40px;


	-webkit-transform: rotate(360deg);
	animation: rotation2 5s linear infinite;
	-moz-animation: rotation2 5s linear infinite;
	-webkit-animation: rotation2 5s linear infinite;
	-o-animation: rotation2 5s linear infinite;
}

核心代码：

@-webkit-keyframes rotation1 {
	from
   {
		-webkit-transform: rotate(360deg);
	}
   to
   {
	   -webkit-transform: rotate(0deg);
   }
}

用关键词 “from” 和 “to”，等同于 0% 和 100%。来规定变化发生的时间0% 是动画的开始，100% 是动画的完成。
使用rotate()方法定义一个2d旋转，在一个给定度数顺时针旋转的元素。

    animation-name: rotation1;  //动画名称
	animation-duration: 5s;  //动画完成时间
	animation-timing-function: linear;  //动画播放模式
	animation-iteration-count: infinite;  //播放次数

animation-timing-function取值有：
linear：动画从头到尾的速度是相同的
ease：默认。动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值