我正在尝试学习 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
可以帮助更好地保持计时功能。我为旋转功能使用了 width: 40vw
以稍微响应/视口(viewport)依赖并且不会旋转太多偏移。
调整边距和宽度值以获得合适的动画。
<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)
关于CSS循环动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32520546/