Как сделать появляющийся текст в html
Ответы
Aleksey
06 апреля 2023
Для создания появляющегося текста в HTML можно использовать CSS анимацию. Вот пример кода:
<p class="fade-in">Этот текст появится с анимацией</p>
.fade-in {
opacity: 0; /* начальное значение непрозрачности */
animation: fadeIn ease-in 1; /* добавляем анимацию fadeIn */
animation-fill-mode: forwards; /* будет видимым после завершения анимации */
animation-duration: 1s; /* длительность анимации в 1 секунду */
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
В данном примере мы создали класс .fade-in
, который устанавливает начальное значение непрозрачности элемента в 0. Затем мы добавили анимацию fadeIn
, которая будет применяться к элементу с классом .fade-in
. Анимация fadeIn
задает изменение непрозрачности элемента от 0 до 1 за 1 секунду.
Ключевой момент здесь - использование @keyframes
, где мы указываем настройки анимации. В нашем случае, мы указали, что на 0% непрозрачность элемента должна быть равна 0, а на 100% - 1.
Таким образом, при загрузке страницы элемент с классом .fade-in
будет иметь непрозрачность 0 и станет видимым с анимацией, когда посетитель прокрутит страницу.
0
0