CSS-动画-transform-animation

一：transform用法（/*IE 9 以及更早的版本不支持 transform */）

				transform: rotate(45deg) translateX(20px);
				-ms-transform: rotate(45deg)translateX(20px);
				/* IE 9 */
				-moz-transform: rotate(45deg)translateX(20px);
				/* Firefox */
				-webkit-transform: rotate(45deg) translateX(20px);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg)translateX(20px);
				transition: all 1s ease;
				-webkit-transition: all 1s ease;

二：animation用法（/*IE 9 以及更早的版本不支持 animation 需要position: relative;*/）
	
 			position: relative;
			animation: mymove 5s infinite;
			-webkit-animation: mymove 5s infinite;
			/*Safari and Chrome*/


			@keyframes mymove {
				/*from {
					left: 0px;
				}
				to {
					left: 200px;
				}
				*/
				0% {
					left: 0px;
				}
				100% {
					left: 200px;
				}
			}
			
			@-webkit-keyframes mymove
			/*Safari and Chrome 外围需要{}包裹一下*/
			{
				/*from {
					left: 0px;
				}
				to {
					left: 200px;
				}*/
				0% {
					left: 0px;
				}
				100% {
					left: 200px;
				}
			}