请问以下CSS动画怎修改？

rock_333 2017-07-16 04:33:15

.aa {
width: 100px;
height: 100px;
position: relative;
animation: mymove 3s infinite;

}
以面的类一次实现了图片移动为3S，第一张图片与第二张图片转换为3S，

而我想实现图片从左向右移动的时间是1s, 而第一张图片与第二张图片转换的时间是3S，请问高手怎改？？？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.aa {
width: 100px;
height: 100px;
position: relative;
animation: mymove 3s infinite;

}

@keyframes mymove {
0%{background:url(rr1.png) no-repeat;}
30%{background:url(rr2.png) no-repeat;} //这里我想3S时间

from {
left: 0px; //从左到右移动我想1s时间
}

to {
left: 200px;
}
}

</style>
</head>
<body>

<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div class=" aa">asdfsadf</div>

</body>
</html>

...全文

121 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-07-16

打赏
举报

引用 3 楼 wear1983 的回复:

我意思是，第一与第二张图片，切换的时间快一点，为1s,然后以3s的速度慢慢的向右移动

看#1楼

wear1983 2017-07-16

打赏
举报

我意思是，第一与第二张图片，切换的时间快一点，为1s,然后以3s的速度慢慢的向右移动

天际的海浪 2017-07-16

打赏
举报


        @keyframes mymove {
	        0%{
	            left: 0px;
		        background:url(rr1.png) no-repeat;
		    }
		    30%{
	            left: 200px;
		    }
	        100% {
			    background:url(rr2.png) no-repeat;
	        }
        }

天际的海浪 2017-07-16

打赏
举报


        @keyframes mymove {
	        0%{
	            left: 0px;
		        background:url(rr1.png) no-repeat;
		    }
		    30%{
			    background:url(rr2.png) no-repeat;
		    }
	        100% {
			    background:url(rr2.png) no-repeat;
	            left: 200px;
	        }
        }

注意：ie浏览器不背景图片做动画，谷歌浏览器可以