我的css3动画效果有问题。 作为一个例子。 这朵云一直动画到 7 秒,7 秒后,它又回到起点并再次动画。 但是当它到达起点时,它显示像云回来并开始动画。我想停止那个东西并且只连续地向一个方向动画。 谁能帮忙?
CSS3
.sky {
height:638px;
background:#007fd5;
position:relative;
overflow:hidden;
-webkit-animation:sky_background 50s ease-out infinite;
-moz-animation:sky_background 50s ease-out infinite;
-o-animation:sky_background 50s ease-out infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.moon {
background:url("http://montanaflynn.me/lab/css-clouds/images/moon.png");
position:absolute;
left:0;
height:85%;
width:300%;
-webkit-animation:moon 50s linear infinite;
-moz-animation:moon 50s linear infinite;
-o-animation:moon 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_one {
margin-top: -55px;
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
position:absolute;
left:0;
top:0;
height:80%;
width:400%;
-webkit-animation:cloud_one 3s linear infinite;
-moz-animation:cloud_one 3s linear infinite;
-o-animation:cloud_one 3s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_two {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
position:absolute;
left:0;
top:0;
height:80%;
width:400%;
-webkit-animation:cloud_two 4s linear infinite;
-moz-animation:cloud_two 4s linear infinite;
-o-animation:cloud_two 4s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
.clouds_three {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
position:absolute;
left:0;
top:0;
height:75%;
width:400%;
-webkit-animation:cloud_three 7s linear infinite;
-moz-animation:cloud_three 7s linear infinite;
-o-animation:cloud_three 7s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}
@-webkit-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}
50% {
background:#007fd5;
color:#007fd5
}
100% {
background:#007fd5;
color:#007fd5
}
}
@-webkit-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes cloud_one {
0% {
left:0
}
100% {
left:-200%
}
}
@-webkit-keyframes cloud_two {
0% {
left:0
}
100% {
left:-200%
}
}
@-webkit-keyframes cloud_three {
0% {
left:0
}
100% {
left:-200%
}
}
@-moz-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}
50% {
background:#000;
color:#a3d9ff
}
100% {
background:#007fd5;
color:#007fd5
}
}
@-moz-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-moz-keyframes cloud_one {
0% {
left:0
}
100% {
left:-200%
}
}
@-moz-keyframes cloud_two {
0% {
left:0
}
100% {
left:-200%
}
}
@-moz-keyframes cloud_three {
0% {
left:0
}
100% {
left:-200%
}
}
HTML
<div class="sky">
<div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
</div>
最佳答案
@-webkit-keyframes cloud_one {
0% {
left:100%
}
100% {
left:-100%
}
}
@-webkit-keyframes cloud_two {
0% {
left:100&
}
100% {
left:-100%
}
}
@-webkit-keyframes cloud_three {
0% {
left:+100%
}
100% {
left:-100%
}
}
关于jquery - Css3 中的云动画循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31064853/