хочу добавить таймер и выдвинуть

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 анимации.

1. Подождите 2 секунды (animation: 2s)
2. Вставить за 2,8 секунды
3. Задержать на 10 секунд
4. Выдвинуть за 0,5 секунды

Общая продолжительность анимации: 13,3 секунды

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

Я округляю процент до числа, которым проще управлять в этом примере.

Итак, вы хотите сначала установить значение 20%, чтобы ползунок отображался полностью (right: 0), затемВы хотите держать его там в течение еще 75% (20% + 75% = 95%) продолжительности, удерживая его в (right: 0).Наконец, вы хотите выдвинуть его, установив right обратно к тому, что было с inherit.

В конце вы хотите, чтобы ваша анимация slide длилась 13,3 с.

.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; }
}

<div class="wrapper">
    <img id="slide" src="https://via.placeholder.com/536x96" />
</div>