/* repo: ifloor path: public/motion/motion.css docs: public/motion/README.md motion.css — reveal-on-scroll */ :root{ --reveal-distance: 16px; --reveal-blur: 6px; --reveal-duration: 650ms; --reveal-ease: cubic-bezier(.2,.8,.2,1); } /* Включается только когда JS в поставил класс .motion. Это даёт безопасный fallback: если JS не загрузится — контент не останется скрытым. */ .motion [data-reveal]{ opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); filter: blur(var(--reveal-blur)); transition-property: opacity, transform, filter; transition-duration: var(--reveal-duration); transition-timing-function: var(--reveal-ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .motion [data-reveal].is-inview{ opacity: 1; transform: translate3d(0,0,0); filter: none; } /* variants */ .motion [data-reveal="left"]{ --reveal-distance: 22px; transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0); filter: none; } .motion [data-reveal="right"]{ --reveal-distance: 22px; transform: translate3d(var(--reveal-distance), 0, 0); filter: none; } .motion [data-reveal="down"]{ transform: translate3d(0, calc(var(--reveal-distance) * -1), 0); filter: none; } .motion [data-reveal="zoom"]{ --reveal-duration: 600ms; transform: translate3d(0,0,0) scale(.94); filter: none; } .motion [data-reveal="fade"]{ --reveal-duration: 520ms; transform: translate3d(0,0,0); filter: none; } .motion [data-reveal="pop"]{ --reveal-duration: 520ms; --reveal-ease: cubic-bezier(.175,.885,.32,1.275); transform: translate3d(0,0,0) scale(.90); filter: none; } .motion [data-reveal="tilt"]{ --reveal-duration: 720ms; transform: translate3d(0, var(--reveal-distance), 0) rotate(-1.6deg); filter: none; } .motion [data-reveal="skew"]{ --reveal-duration: 700ms; transform: translate3d(0, var(--reveal-distance), 0) skewY(-4deg); filter: none; } /* reduced motion: всегда показываем контент и убираем переходы */ @media (prefers-reduced-motion: reduce){ .motion [data-reveal]{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; will-change: auto !important; } }