云的动画效果

.one

{

left:600px;

top:20px;

opacity: .7;

transform: scale(.8);

animation-name:cloudOne;

animation-duration: 10s;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-fill-mode: backwards;

}

@keyframes cloudOne

{

from {right:-100px;}

to {left:-100px; }

}

按我上面的代码，云飘到最左边后总是会跳回最初静止的位置再往左飘，不管怎么改from的数值都没用，但是如果改成下面的就能从最右侧飘到最左侧，但是初始位置也变成最右侧了，这是为什么？

@keyframes cloudOne

{

from {margin-left: 100%;}

to {margin-left: -100%; }

}

慕瓜9218797 2018-12-03

源自：CSS3图片切换特效 4-2 作业题

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2018-12-04 09:43:45

因为在动画中设置的属性覆盖了之前的，所以总是从动画设置的位置开始，如果想要实现从第一次设置的位置开始，需要使用到js中的webkitAnimationEnd事件，监听第一次动画完成之后执行第二个动画。给你举了一个例子，自己可以测试下：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    body {
        overflow: hidden;
    }
 
    div {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 50px;
 
    }
 
    .animation1 {
        animation: start1 5s ease;
    }
 
    .animation2 {
        animation: start2 8s infinite ease;
    }
 
    @keyframes start1 {
        0% {
            left: 50%;
        }
 
        100% {
            left: -100%;
        }
    }
 
    @keyframes start2 {
        0% {
            left: 100%;
        }
 
 
        100% {
            left: -100%;
        }
    }
    </style>
</head>
<div id="cloud" class="animation1"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
var cloud = $('#cloud')
cloud.on("webkitAnimationEnd", function() {
        cloud.removeClass("animation1");
        cloud.addClass("animation2");
    }
 
);
</script>
</body>
 
</html>