Этот эффект часто используют для появления блоков на странице при загрузке или при прокрутке — например, когда карточка товара «въезжает» с левой или правой стороны. Он создаёт ощущение динамики и привлекает внимание.
Это статья из цикла заметок по CSS анимации и эффектам.
Как это работает
Анимация строится на комбинации @keyframes, transform и opacity. Сначала элемент находится за пределами экрана и прозрачный, а затем плавно перемещается в своё место и становится видимым.
Пример, того как это выглядит
Вот пример на чистом CSS / HTML
|
1 |
<div class="slide-in">Привет, я слайд!</div> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@keyframes css-animation-slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .slide-in { animation: css-animation-slideIn 0.8s ease-out forwards; } |
Пояснение:
translateX(-100%)— элемент стартует за левым краем.opacity: 0— он изначально невидим.forwards— сохраняет конечное состояние после окончания анимации.ease-out— анимация замедляется к концу, создавая естественный эффект.
Вариации:
- Справа:
translateX(100%) - Снизу:
translateY(100%) - Комбинированный эффект: одновременно с масштабом или тенью
Чтобы элемент не «въезжал» каждый раз при любом изменении, можно задать анимацию только один раз (например, при загрузке), или запускать её через класс, добавляемый JavaScript’ом при прокрутке.