【发布时间】：2021-07-26 16:19:32
【问题描述】：
我正在尝试实现这种动画，其中项目保持正确然后从后面出现：
但是我的代码不起作用，它只是在错误的时间和错误的地方返回，这是我的代码：
.floatingItem {
flex: 0 0 auto;
width: 130px;
height: 200px;
animation: moveRight 2s linear infinite;
display: flex;
align-items: center;
justify-content: center;
transition: 100ms all ease-in;
img {
width: 100px;
height: 110px;
transition: 100ms all ease-in;
}
}
.fi2 {
margin-top: 0;
}
@keyframes moveRight {
0% {
transform: translateX(-10%);
}
100% {
transform: translateX(100%);
}
}<div class="floatingItems">
<div class="floatingItem">
<img class="floatImage" src="itemImage" alt="">
</div>
</div>【问题讨论】：
-
您的
.jpg图像很好地向我们展示了您希望动画的外观。 -
你如何管理这取决于你想要什么效果。你想调整图标的大小，使它们加上它们之间的间隙，总是至少填满视口的宽度吗？ （使外观与图像中的图标宽度具有相同的比例差距 - 但有一些最小尺寸？？）
标签： html css animation sass css-animations