我试图学习HTML和CSS，但我遇到了一个问题：
<style style="text/css">
div.slide-slow {
width: 100%;
overflow: hidden;
}
div.slide-slow div.inner {
animation: slide-slow 30s;
margin-top: 0%;
}
@keyframes slide-slow {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
</style>
<div class="slide-slow">
<div class="inner">
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
</div>
</div>
我想让这个CSS循环，不只是停止时，它完成。是否有可能使一个CSS函数循环？
解决方法
使用
animation-iteration-count: infinite.使用数字值限制循环。
<style style="text/css">
div.slide-slow {
width: 100%;
overflow: hidden;
}
div.slide-slow div.inner {
animation: slide-slow 3s;
margin-top: 0%;
animation-iteration-count: infinite;
}
@keyframes slide-slow {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
</style>
<div class="slide-slow">
<div class="inner">
<img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
</div>
</div>
附加：对于Ismael的建议，使用翻转效果来实现来回动画，你可以使用rotateY(180deg).相反，在一个静态的地方/位置翻转，最好是旋转鱼，如同它与水的流动一起移动电流向后(正常动画)。 ease-in-out可以帮助保持定时功能更好。我已经使用宽度：40vw旋转功能稍微响应/视图端口依赖和不旋转太多偏移。
使用边距和宽度值来实现合适的动画。
<style style="text/css">
* {
margin: 0;
padding: 0;
}
div.slide-slow {
width: 100%;
overflow: hidden;
}
div.slide-slow div.inner {
animation: slide-slow 15s;
margin-top: 0%;
animation-iteration-count: infinite;
animation-delay: 0s;
width: 40vw;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
@keyframes slide-slow {
0% {
margin-left: 85%;
}
25% {
margin-left: 20%;
transform: rotateY(0deg);
}
50% {
margin-left: -25%;
transform: rotateY(180deg);
transform-origin: center center;
}
75% {
margin-left: 50%;
transform: rotateY(180deg);
}
100% {
margin-left: 85%;
transform: rotateY(0deg);
}
}
</style>
<div class="slide-slow">
<div class="inner">
<img src="http://i.stack.imgur.com/nJAsS.gif" alt="Swimming fish">
</div>
</div>
(图像源：http://www.html.am/images/html-codes/marquees/fish-swimming.gif)
