Превью CSS-классов анимации *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } :root { –w-gold: #C9A96E; –w-rose: #C0755A; –w-ivory: #FAF7F2; –w-ink: #2E2118; } body { background: #F5EFE6; font-family: ‘Tenor Sans’, sans-serif; color: var(–w-ink); } /* ── Layout ── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 3px; padding: 3px; } .card { background: var(–w-ivory); padding: 3rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; min-height: 220px; position: relative; overflow: hidden; } .card–dark { background: var(–w-ink); } .card–parch { background: #F2EBE0; } .card__tag { font-size: 0.55rem; letter-spacing: 0.45em; text-transform: uppercase; color: #B5967F; position: absolute; top: 1.2rem; left: 1.5rem; } .card__tag–light { color: rgba(201,169,110,0.5); } .card__class { font-size: 0.65rem; letter-spacing: 0.1em; color: var(–w-rose); font-family: ‘Courier New’, monospace; background: rgba(192,117,90,0.08); padding: 0.2em 0.5em; border-radius: 2px; align-self: flex-start; } .card__class–dark { color: var(–w-gold); background: rgba(201,169,110,0.1); } .demo { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } .header { background: var(–w-ink); padding: 4rem 3rem 3rem; text-align: center; grid-column: 1/-1; } .header h1 { font-family: ‘Cormorant Garamond’, serif; font-weight: 300; font-size: clamp(2rem, 5vw, 3.5rem); color: var(–w-ivory); letter-spacing: 0.05em; margin-bottom: 1rem; } .header p { font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(201,169,110,0.6); } /* ═══ ALL ANIMATION CLASSES ═══ */ .delay-1 { animation-delay: 0.2s !important; } .delay-2 { animation-delay: 0.4s !important; } .delay-3 { animation-delay: 0.7s !important; } .delay-4 { animation-delay: 1s !important; } .delay-5 { animation-delay: 1.4s !important; } .speed-slow { animation-duration: 2s !important; } .speed-fast { animation-duration: 0.5s !important; } .anim-feather { opacity:0; transform:translateY(28px); filter:blur(8px); animation:w-feather 1.4s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes w-feather { to { opacity:1; transform:translateY(0); filter:blur(0); } } .anim-fade-up { opacity:0; transform:translateY(22px); animation:w-fade-up 1s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes w-fade-up { to { opacity:1; transform:translateY(0); } } .anim-fade-in { opacity:0; animation:w-fade-in 1.2s ease forwards; } @keyframes w-fade-in { to { opacity:1; } } .anim-wipe-gold { position:relative; display:inline-block; overflow:hidden; } .anim-wipe-gold::before { content:’’; position:absolute; inset:0; background:var(–w-gold); transform-origin:left; animation:w-wipe 1.2s cubic-bezier(0.77,0,0.18,1) forwards; z-index:1; } @keyframes w-wipe { 0%{transform:scaleX(1);transform-origin:left} 50%{transform:scaleX(1);transform-origin:left} 51%{transform-origin:right} 100%{transform:scaleX(0);transform-origin:right} } .anim-breathe { animation:w-breathe 5s ease-in-out infinite; display:inline-block; } @keyframes w-breathe { 0%,100%{opacity:0.72;transform:scale(1)} 50%{opacity:1;transform:scale(1.018)} } .anim-shimmer { background:linear-gradient(120deg,#C9A96E 0%,#F0D9A8 35%,#C9A96E 55%,#A07840 80%,#C9A96E 100%); background-size:250% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:w-shimmer 4s linear infinite; } @keyframes w-shimmer { from{background-position:0% center} to{background-position:250% center} } .anim-float { animation:w-float 6s ease-in-out infinite; display:inline-block; } @keyframes w-float { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-8px) rotate(2deg)} 66%{transform:translateY(-4px) rotate(-1deg)} } .anim-slide-left { opacity:0; transform:translateX(-40px); animation:w-slide-left 1s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes w-slide-left { to{opacity:1;transform:translateX(0)} } .anim-slide-right { opacity:0; transform:translateX(40px); animation:w-slide-right 1s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes w-slide-right { to{opacity:1;transform:translateX(0)} } .anim-scale-in { opacity:0; transform:scale(0.88); animation:w-scale-in 1.2s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes w-scale-in { to{opacity:1;transform:scale(1)} } .anim-blur-in { opacity:0; filter:blur(12px); animation:w-blur-in 1.6s ease forwards; } @keyframes w-blur-in { to{opacity:1;filter:blur(0)} } .anim-letter-space { letter-spacing:0.6em; opacity:0; animation:w-letter-space 1.4s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes w-letter-space { from{letter-spacing:0.6em;opacity:0} to{letter-spacing:0.08em;opacity:1} } .anim-stroke { color:transparent; -webkit-text-stroke:1.5px var(–w-gold); background:linear-gradient(var(–w-gold),var(–w-gold)) no-repeat; -webkit-background-clip:text; background-clip:text; background-size:0% 100%; animation:w-stroke 1.8s ease forwards; } @keyframes w-stroke { to{background-size:100% 100%;color:var(–w-gold);-webkit-text-stroke:1.5px transparent} } .anim-underline { position:relative; display:inline-block; } .anim-underline::after { content:’’; position:absolute; left:0; bottom:-4px; height:1.5px; width:0; background:var(–w-gold); animation:w-underline 1s ease 0.6s forwards; } @keyframes w-underline { to{width:100%} } .anim-pulse { animation:w-pulse 3s ease-in-out infinite; display:inline-block; } @keyframes w-pulse { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} } .w-names { font-family:‘Cormorant Garamond’,serif; font-weight:300; font-size:clamp(2.5rem,6vw,5rem); line-height:1; letter-spacing:0.05em; opacity:0; transform:translateY(24px); filter:blur(6px); animation:w-feather 1.6s cubic-bezier(0.22,1,0.36,1) forwards; } .w-date { font-family:‘Cormorant Garamond’,serif; font-style:italic; font-size:clamp(0.9rem,2vw,1.2rem); letter-spacing:0.35em; color:var(–w-gold); opacity:0; animation:w-fade-in 1.2s ease 1.2s forwards; } .w-caption { font-size:0.65rem; letter-spacing:0.5em; text-transform:uppercase; color:#B5967F; opacity:0; animation:w-fade-up 1s ease 0.8s forwards; } .w-divider { display:flex; align-items:center; gap:1rem; opacity:0; animation:w-fade-in 1s ease 1s forwards; } .w-divider::before,.w-divider::after { content:’’; flex:1; max-width:80px; height:1px; background:linear-gradient(to right,transparent,var(–w-gold),transparent); } .w-quote { font-family:‘Cormorant Garamond’,serif; font-style:italic; font-size:clamp(1rem,2vw,1.5rem); line-height:1.7; color:#8C7B6E; opacity:0; transform:translateY(16px); animation:w-fade-up 1.2s ease 0.5s forwards; } /* Restart button */ .restart-btn { position: fixed; bottom: 2rem; right: 2rem; background: var(–w-ink); color: var(–w-gold); border: 1px solid rgba(201,169,110,0.3); padding: 0.7rem 1.5rem; font-family: ‘Tenor Sans’, sans-serif; font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; transition: all 0.3s; z-index: 999; } .restart-btn:hover { background: var(–w-gold); color: var(–w-ink); } /* Cormorant helper */ .cg { font-family: ‘Cormorant Garamond’, serif; font-weight: 300; } .cg-i { font-family: ‘Cormorant Garamond’, serif; font-style: italic; font-weight: 300; }

01 .anim-feather

Александр

& Мария

Буквы всплывают сквозь туман

02 .anim-fade-up

Наш день

14 июня 2026

Появляется снизу плавно

03 .anim-wipe-gold

Вместе

навсегда.

Золотая шторка открывает текст

04 .anim-breathe

Любовь

Текст нежно пульсирует

05 .anim-shimmer

Александр

& Мария

Золотой перелив

06 .anim-float

◆ ✦ ◇ ✿

Орнаменты медленно парят

07 .anim-slide-left

Церемония

14:00 · ЗАГС

Въезжает слева

08 .anim-slide-right

Банкет

18:00 · Ресторан

Въезжает справа

09 .anim-scale-in

ЛЮБОВЬ

Появляется с увеличением

10 .anim-blur-in

Навсегда

Проявляется из расфокуса

11 .anim-letter-space

ВМЕСТЕ

Буквы сходятся вместе

12 .anim-stroke

Навсегда

Обводка заполняется золотом

13 .anim-underline

Александр & Мария

Нарастающее подчёркивание

14 .anim-pulse

◆

◆

Мерцание для орнаментов

Комбо-классы

14 июня 2026

Александр& Мария

◆

Москва · Россия

«Ты — это дом, который я искал всю жизнь.»