• 保存到桌面  加入收藏  设为首页
HTML5

CSS-动画-transform-animation

时间:2017-09-19 16:28:52   作者:江节胜   来源:胜行天下   阅读:249   评论:0
一: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;
				}
			}

有任何疑问或技术合作都可联系我

微信:767000122 【推荐】

QQ:596957738


标签:CSS  动画  transform  animation  
相关评论

加我微信 596957738 (QQ同号)加我微信   QQ联系:596957738   地址:江苏省南京市雨花台区

苏公网安备32011402010305号

皖ICP备16019989号

江节胜的Gitee,江节胜的Git地址