Блог

Главная - Вопросы по программированию - CSS: как заставить текст навсегда исчезнуть из сцены?

CSS: как заставить текст навсегда исчезнуть из сцены?

#css

#css

Вопрос:

 #alert-user-message {
text-align: center;
position: absolute;
top: 200;
right: 100;
animation-name: textAnim;
animation-duration: 5s;
animation-delay: 2s;
}

@keyframes textAnim {
 0%   {opacity:1;}
 90%  {opacity:1;}
 100% {opacity:0;}
}

Вы можете видеть в примере видео. Я пытаюсь скрыть текст с помощью приведенного выше кода, но он просто возвращается к 1 непрозрачности и остается в сцене. Я ЭТОГО НЕ хочу. Мне нужно, чтобы текст переходил «навсегда» так или иначе.

Как это правильно делается в CSS? В streamlabs есть встроенные анимации ввода / вывода, но весь их код спрятан и недоступен для просмотра.

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

1. Я бы посоветовал вам использовать js. Идентификатор CSS на самом деле не используется для постоянного изменения элемента

Ответ №1:

Используется animation-fill-mode: forwards; для сохранения его состояния в конце анимации.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

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

1. У меня было ощущение, что это режим заливки. Документация была очень запутанной в объяснении этого. Спасибо.