Html CSS动画不工作

这是代码，我真的不明白怎么了

我也尝试过使用-webkit-但是尝试在屏幕上移动对象没有任何区别，只是简单的动画

HTML:

---

我只修改了你的一部分代码

对于要制作一些动画的元素，应该指定

位置

，以便

aboslute

或

relative

或者您可以在关键帧中使用

边距

来移动元素

.cloud {
    background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
    height:100px;
    width:130px;
    background-size:100px auto;
    text-indent: -999em;
    animation: cloud 5s linear infinite;
    -webkit-animation: cloud 5s linear infinite;
    position:relative;
}
@-webkit-keyframes cloud {
    0%, 100% {
        left: 0%;
    }
    50% {
        left: 100%;
    }
}
.balloon {
    background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
    background-size:100px auto;
    width: 100px;
    height: 130px;
    text-indent: -999em;
    animation: cloud 5s linear infinite;
    -webkit-animation: cloud 5s linear infinite;
    position:relative;
}
@-webkit-keyframes balloon {
    0%, 100% {
        left: 0%;
    }
    50% {
        left: 100%;
    }
}

---

从代码中删除

在此处输入代码

。

    .cloud  {
       background: url(../image/cloudskills.svg)no-repeat;
       height:100px;
       width:130px;
       text-indent: -999em;
       animation: cloud 5s linear infinite;
       -webkit-animation: cloud 5s linear infinite;
    }

    @-webkit-keyframes cloud {
       0%, 100% {
       left: 0%;
     }
       50% {
       left: 100%;
     }
   }

   .balloon {
     background: url(../image/balloonworks.svg)no-repeat;
     width: 100px;
     height: 130px;
     text-indent: -999em;
     animation: balloon 5s linear infinite;
   }

   @keyframes balloon{
     0%, 100% {
      left: 0%;
     }
     50% {
      left: 100%;
     }
   }

@-webkit-keyframes cloud {
   0% {
   left: 0;
 }
   50% {
   margin-left: 100%; /*changed 'left:100%' to 'margin-left:100%'*/
 }
100%{
    left:0;
}

.cloud {
    background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
    height:100px;
    width:130px;
    background-size:100px auto;
    text-indent: -999em;
    animation: cloud 5s linear infinite;
    -webkit-animation: cloud 5s linear infinite;
    position:relative;
}
@-webkit-keyframes cloud {
    0%, 100% {
        left: 0%;
    }
    50% {
        left: 100%;
    }
}
.balloon {
    background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat;
    background-size:100px auto;
    width: 100px;
    height: 130px;
    text-indent: -999em;
    animation: cloud 5s linear infinite;
    -webkit-animation: cloud 5s linear infinite;
    position:relative;
}
@-webkit-keyframes balloon {
    0%, 100% {
        left: 0%;
    }
    50% {
        left: 100%;
    }
}