请问老师我的动画哪里有问题

来源：2-15 作业题

hy_wang

2018-05-27 22:29:21

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        :root{
            --k1:5s;
            --k2:2s;
            --k3:2.5s;
            --k4:3s;
            --k5:3.5s;
        };
        .sky,.law{
            position: relative;
        }
        .sky{
            height: 60vh;
            background: linear-gradient(180deg,rgb(196, 228, 253) 15%,rgba(196, 228, 253,0.4) 95%,#fff 100%);
        }
        .law{
            height: 40vh;
            background-image: linear-gradient(0deg,rgb(148, 190, 89),rgba(148, 190, 89,0.2) 95%,#fff 100%);
        }
        .law::before{
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            background: url("rabbit.png") no-repeat;
            background-size: 200px;
            bottom: 50px;
            right: 200px;
        }
        .cloud{
            width: 140px;
            height: 50px;
            border-radius: 30px;
            position: absolute;
            background-color: #fff;
        }
        .cloud::after,.cloud::before{
            content: "";
            position: absolute;
            background-color: #fff;
        }
        .cloud::before{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            top: -25px;
            left: 48px;
        }
        .cloud::after{
            width: 70px;
            height: 60px;
            position: absolute;
            transform:rotate(70deg);
            border-radius: 50%;
            top: -9px;
            left: 8px;
        }
        .one{
            right: -140px;
            animation:one var(--k1) infinite;
        }
        .two{
            right: -140px;
        }
        .three{
            right: -140px;
        }
        .four{
           right: -140px;
        }
        .five{
           right: -140px;
        }
        @keyframes one{
            form {right:-140px;}
            10% {right:10%;}
            20% {right:20%;}
            30% {right:30%;}
            40% {right:40%;}
            50% {right:50%;}
            60% {right:60%;}
            70% {right:70%;}
            80% {right:80%;}
            90% {right:90%;}
            to {left:-140px;}
        }
    </style>
</head>

<body>
   <div class="sky">
       <div class="cloud one"></div>
       <div class="cloud two"></div>
       <div class="cloud three"></div>
       <div class="cloud four"></div>
       <div class="cloud five"></div>
   </div>
   <div class="law"></div>
</body>
</html>

请问老师我的动画效果为什么 one

这个到了页面右边的百分之30左右就消失了？？

我用的firefox浏览器

写回答

1回答