:root { --animate-duration: .6s; } /* Прячем только когда скрипт подтвердил, что умеет показать обратно: класс js-anim ставит короткая вставка в , она же снимает его по таймауту, если anim.js не загрузился. Без JS правило не сработает вовсе. */ .js-anim [data-anim] { opacity: 0; } .js-anim [data-anim].animate__animated { opacity: 1; } /* Библиотечный fadeInUp поднимает блок на всю его высоту (translate3d 100%). Для секции высотой в экран это выглядит рывком снизу, а не появлением. Переопределяем кадры под тем же именем - подключается ПОСЛЕ animate.min.css, поэтому выигрывает; имена классов остаются библиотечными. */ @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } } .animate__fadeInUp, .animate__fadeInLeft, .animate__fadeInRight { --animate-duration: .7s; } @media (prefers-reduced-motion: reduce) { .js-anim [data-anim] { opacity: 1; } }