-1
我正在尝试创建一个显示我的云图像的CSS动画，然后在四秒钟的时间内云移动到左边直到它到达终点。无论出于何种原因，我都没有得到任何东西来展示我的尝试。CSS动画不显示
有没有人看到任何可能导致此不显示？
#cloud-container {
width: 50%;
position: relative;
}
#cloud-animation {
width: 80%;
height: 400px;
position: relative;
-webkit-animation-name: cloud;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
animation-name: cloud;
animation-duration: 4s;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
animation-direction: normal;
}
@keyframes cloud {
0% {
background-image: url("http://optimumwebdesigns.com/images/cloud.JPG");
background-repeat: no-repeat;
background-size: 100% auto;
height: 400px;
width: 400px;
left: 30%;
top: 0px;
}
1000% {
background-image: url("http://optimumwebdesigns.com/images/cloud.JPG");
background-repeat: no-repeat;
background-size: 100% auto;
height: 400px;
width: 400px;
left: 10%;
top: 0px;
}
}
@-webkit-keyframes cloud {
0% {
background-image: url("http://optimumwebdesigns.com/images/cloud.JPG");
background-repeat: no-repeat;
background-size: 100% auto;
height: 400px;
width: 400px;
left: 30%;
top: 0px;
}
100% {
background-image: url("http://optimumwebdesigns.com/images/cloud.JPG");
background-repeat: no-repeat;
background-size: 100% auto;
height: 400px;
width: 400px;
left: 10%;
top: 0px;
}
}
}<div id="cloud-container">
<div id="cloud-animation"></div>
</div>
的背景规则的链接给404 – silviagreen
我不知道404是如何被给予。它在我的文件管理器中打开。 – Becky
@silviagreen我想出了路径问题。我必须把JPG大写。我也纠正了1000％的错误。不过，由于某些原因，照片变得越来越小，渐渐淡出。你看到任何理由为什么？ – Becky