这是代码，我真的不明白哪里错了。
我也尝试过使用 -webkit-，但尝试在屏幕上移动对象时没有任何区别，简单的动画
HTML:
<body>
<h1 class='cloud'>
SKILLS
</h1>
<h1 class='balloon'>
WORKS
</h1>
</body>
CSS:
.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%;
}
}
最佳答案
对于制作一些动画的元素，应该给出 aboslute 或 relative 或者你可以使用 margin > 在关键帧中移动元素
.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%;
}
}
关于html - CSS 动画不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26202920/