*{
   padding: 0;
   margin: 0;
   text-decoration: none;
   list-style: none;
}
html,body{
   height:100%;
   width:100%;
   overflow: hidden;
}
.sky{
   width: 100%;
   height: 60%;
   background:linear-gradient(rgb(196, 228, 253),#fff);
}
.ground{
   width: 100%;
   height: 40%;
   background:linear-gradient(#fff,rgb(148,190,89));
}
.c{
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: #ffffff;
}
.c:before{
   content:"";
   width: 46px;
   height: 170px;
   border-radius: 40px;
   background: #ffffff;
   display: block;
   transform: translateX(2px) translateY(-15px) rotate(90deg);
}
.c:after{
   content: '';
   width: 55px;
   height: 83px;
   border-radius: 30px;
   background: #ffffff;
   display: block;
   transform: translateX(-41px) translateY(-147px) rotate(144deg);
}
.c1{
   position: relative;
   left: 800px;
   animation: cloud 5s linear infinite;
}
.c2{

   opacity: .5;
   animation: cloud 6s linear infinite;
}
.c3{
   position: relative;
   left: 120px;
   transform: scale(.8,.8);
   opacity: .8;
   top: -155px;
   animation: cloud 7s linear infinite;
}
.c4{
   position: relative;
   left:80px;
   transform: scale(.4,.4);
   opacity: .6;
   top: -218px;
   animation: cloud 6.5s linear infinite;
}
.c5{
   position: relative;
   left:847px;
   transform: scale(.7,.7);
   opacity: .7;
   top: -335px;
   animation: cloud 5.8s linear infinite;
}
@keyframes cloud {
    from{
        transform: translateX(100%);

    }
    to{
        transform: translateX(0%);
    }
}
C1-C5分别是5个云朵，我分别设置了scale，想共用一个关键帧通过动画完成时间的不同实现作业中要求的效果。现在有两个问题：1，我在C1-C5中分别设置了transform:scale()，然后关键帧中设置了transform:translate()，关键帧中的tramsform就把上面的给覆盖了导致设置的scale失效了，解决方法是否只有设置5个关键帧分别把scale写在关键帧中的transform呢？这样感觉有点麻烦。问题2，云朵从屏幕右边到左边，我想的是把translate从100%到0，但是这个位移好像不是相对于整个网页的，导致从右边移动过来到一半，动画就完成了，请问一下应该怎么设置更为妥当呢，感谢！