css放大循环,CSS循环一个动画

使用

animation-iteration-count: infinite.使用数字值限制循环。

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%;

}

}

附加：对于Ismael的建议，使用翻转效果来实现来回动画，你可以使用rotateY(180deg).相反，在一个静态的地方/位置翻转，最好是旋转鱼，如同它与水的流动一起移动电流向后(正常动画)。 ease-in-out可以帮助保持定时功能更好。我已经使用宽度：40vw旋转功能稍微响应/视图端口依赖和不旋转太多偏移。

使用边距和宽度值来实现合适的动画。

* {

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);

}

}