Создание анимации затухания / затухания с заданной задержкой в HTML / CSS / JS (StreamLabs)

#javascript #html #css #fadein #fadeout

#javascript #HTML #css #fadein #затухание

Вопрос:

В Streamlabs есть функция, которая позволяет вам задерживать анимацию затухания текста через определенное время (без какого-либо дополнительного кода). Однако эта функция практически не используется. Также нет возможности управлять анимацией затухания.

Если вы определяете задержку затухания ~ 4s: он переходит (после 4s) прямо с 0% непрозрачности на 50% непрозрачности, а еще через секунду он переходит на 100% непрозрачности. Нет плавной анимации. Однако этого не произойдет, если у вас есть «задержка текста» на 0 секунд. Все выглядит нормально, если вы сохраняете значение 0s.

Итак, мне было интересно, как реализовать мою собственную версию анимации fadeInFadeOut с помощью HTML, CSS или JS.

Моя цель — чтобы текст появлялся через 4 секунды с анимацией затухания (продолжительностью 1 секунда), затем он должен оставаться видимым в течение 3 секунд. В конечном итоге текст должен исчезнуть с анимацией затухания (продолжительностью 1 секунда) через 8 секунд.

Достижим ли этот эффект с такой структурой?

анимация: затухание x y вперед;

Ценю всю помощь! Спасибо!

РЕДАКТИРОВАТЬ Вот обновленный код из Streamlabs с анимацией затухания / исчезновения CSS.

 ```HTML
<div id="alert-image-wrap"
 <div id="alert-image">{img}</div>
</div>

<div id="alert-text-wrap">
<div id="alert-text">
<div id="alert-message">{messageTemplate}</div>
<div id="alert-user-message">{userMessage}</div>
</div>
</div>
```


``` CSS (most important parts)
#alert-text {
z-index: 6;
 position: relative;
top: -920px;
}
#alert-text-wrap {
z-index: 6;
position: relative;
opacity:1;
animation: fadein-fadeout 9s forwards; 
}
*//credits @Cedric Cholley*
@keyframes fadein-fadeout {
...
100% {opacity: 0} /* (8   1) 9s / 9s = 100%  */
  

Ответ №1:

Это действительно достижимо с помощью анимации CSS. Вам нужно только произвести некоторые вычисления (см. Мои комментарии к коду CSS.

 .fadein-fadeout {
 animation: fadein-fadeout 9s forwards; 
}

@keyframes fadein-fadeout {
  0% {opacity: 0}
  44.4% {opacity: 0} /* 4s / 9s ~ 44.4…% */
  55.6% {opacity: 1} /* (4   1) 5s / 9s ~ 55.6…% */
  88.9% {opacity: 1} /* (5   3) 8s / 9s ~ 88.9…% */
  100% {opacity: 0} /* (8   1) 9s / 9s = 100%  */  
 <h1 class="fadein-fadeout">A random text</h1>  

Комментарии:

1. Время выбрано идеально, и переход также работает, хотя текст не будет отображаться в полной непрозрачности. (Даже если непрозрачность установлена на ‘1’). Теперь прозрачность больше на 20%. Я включил все основные части своего кода в свой вопрос выше. 🙂 Спасибо!

2. Я не могу заставить код в вопросе работать. В какой-то момент вам не #alert-text нужно менять в top: -920px top: 0

3. Я думаю, я мог бы использовать отдельный класс для преобразования фактического текста. Хотя мне нужен текст в этой определенной позиции, я не знаю, как еще я мог бы добиться такого эффекта. Спасибо за вашу помощь! Я думаю, что этот случай в основном закрыт, ваши ответы мне очень помогли!