Question

想要在这张img中滑动之后的时间，要在插入同一张幻灯片后保持10秒，尝试更多但不能解决

**CSS:**

<div>
.wrapper {
    position: absolute;
    overflow: hidden;
    width: 536px;
    height: 96px;
}

#slide {
    position: absolute;
    right: -536px;
    width: 536px;
    height: 96px;
    -webkit-animation: slide 0.5s backwards;
    -webkit-animation-delay: 2s;
    animation: slide 2.8s forwards;
    animation-delay: 10s;
}

@-webkit-keyframes slide {
   100% { right: 0; }
}

@keyframes slide {
   100% { right: 0; }
}

这是html

HTML:
<div class="wrapper">
    <img id="slide" src="https://c.top4top.net/p_1186khyzu1.png" />
</div>

Answer 1

我希望它将对您有所帮助：使用css keyframe percentage

.wrapper {
    position: absolute;
    overflow: hidden;
    width: 536px;
    height: 96px;
}

#slide {
    position: absolute;
    right: -536px;
    width: 536px;
    height: 96px;
    animation: slide 14s forwards;
}



@keyframes slide {
    15% {right:0}
    85% {right:0}
   100% { right: -536; }
}

<div class="wrapper">
    <img id="slide" src="https://c.top4top.net/p_1186khyzu1.png" />
</div>

Answer 2

-webkit-animation和animation本质上是相同的属性，除了-webkit-是旧版本中的实验性支持。

您不能使用-webkit-animation来指定其他动画，并且由于它们是同一回事，因此在这种情况下animation样式优先，因为它的定义晚于-webkit-animation。

您需要考虑在1个动画中执行此操作，而不是单独制作动画。

等待2秒（animation: 2s）
滑入2.8秒
按住10秒
在0.5秒内滑出

动画总时长：13.3秒

2.8 / 13.3 = 21%
10 / 13.3 = 75%
0.5 / 13.3 = 3.7%

在此示例中，我将百分比四舍五入为更易于管理的数字。

因此，您要先设置20%左右才能完全显示滑块（right: 0），然后再将其保留约75%（{{ 1}}），将其保持为（20% + 75% = 95%）。最后，您想通过将right: 0设置回right来恢复原状。

最后，您希望inherit动画持续13.3秒。

slide

.wrapper {
  position: absolute;
  overflow: hidden;
  width: 536px;
  height: 96px;
}

#slide {
  position: absolute;
  right: -536px;
  width: 536px;
  height: 96px;
  animation: slide 13.3s forwards;
  animation-delay: 2s;
}

@keyframes slide {
  20% { right: 0; }
  95% { right: 0; }
  100% { right: inherit; }
}

想添加计时器并滑出

2 个答案: