Чтобы сделать плавное появление блока CSS, вы можете использовать анимацию или переход (transition).
- Анимация Создайте ключевые кадры (keyframes), которые задают начальное и конечное состояние элемента, и определите продолжительность анимации. Например:
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.block {
animation-name: fadeIn;
animation-duration: 1s;
}В данном примере, при добавлении класса block к любому элементу, он будет анимирован с помощью анимации fadeIn, которая устанавливает начальное состояние элемента с нулевой прозрачностью (opacity: 0) и конечное состояние с полной прозрачностью (opacity: 1) в течение 1 секунды (animation-duration: 1s).
- Переход (Transition) Добавьте переходное свойство к элементу, которое задает продолжительность перехода и какое свойство должно быть анимировано. Например:
.block {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.block.fade-in {
opacity: 1;
}Здесь мы первоначально устанавливаем нулевую прозрачность элемента с классом .block. Затем мы добавляем переход до полной прозрачности при добавлении класса .fade-in. Свойство transition задает, что мы хотим анимировать свойство opacity с продолжительностью 1 секунда и задержкой, которая плавно включает и выключает переход (ease-in-out).
Оба примера работают путем задания разного начального и конечного состояния элемента и выполняют анимацию или переход анимационно. Выбор между анимацией и переходом зависит от конкретного вида анимации, которую вы хотите создать, и того, как оба свойства-переход и анимация соотносятся с вашей разметкой и целями дизайна.
