/* Анимация графиков: столбики и полосы вырастают из нуля, кольцо заметается, зигзаг боёв прочерчивается. Референс — Animated graph (Figma Community): столбики поднимаются от базовой линии друг за другом. Дизайн-система движения такого не предполагает («переходы 120 мс на цвет, единственный @keyframes — pulse»), поэтому анимация живёт отдельным слоем: классы вешает animate.js, компоненты в _ds_bundle.js не тронуты и переживут следующий импорт из Claude Design. Два правила: 1. Анимируется только появление и только transform / stroke — раскладка не дёргается, цифры на месте с первого кадра. 2. Везде fill-mode: backwards, а не both. Начальное состояние живёт внутри @keyframes, а не в правиле: график, до которого анимация почему-либо не дошла (нет IntersectionObserver, вкладка не открывалась), показывается обычным, а не остаётся схлопнутым в ноль. */ /* Угол заметания кольца. Без @property (Chrome < 85) значение не интерполируется — кольцо просто появится целиком, что и нужно. */ @property --sr-sweep { syntax: ''; inherits: false; initial-value: 360deg; } :root { --sr-ease: cubic-bezier(.2,.8,.2,1); --sr-dur: .7s; } @media (prefers-reduced-motion: no-preference) { /* Столбик активности тянется от базовой линии вверх. Масштаб, а не высота: высота задана в процентах, её пересчёт двигал бы соседей. */ .sr-bar.sr-go { transform-origin: bottom; animation: srGrowY var(--sr-dur) var(--sr-ease) backwards; animation-delay: calc(var(--sr-i, 0) * var(--sr-step, 14ms)); } /* Полоса прогресса: золотая заливка ранга, «умения», K/D, долей китов и карт — и мягкая подложка строки в ProgressBar. */ .sr-fill.sr-go { transform-origin: left; animation: srGrowX var(--sr-dur) var(--sr-ease) backwards; animation-delay: calc(var(--sr-i, 0) * var(--sr-step, 45ms)); } /* Кольцо командной игры заметается по часовой. Маска остаётся и после анимации, но с --sr-sweep: 360deg ничего не режет. */ .sr-ring.sr-go { --sr-sweep: 360deg; -webkit-mask-image: conic-gradient(#000 var(--sr-sweep), transparent 0); mask-image: conic-gradient(#000 var(--sr-sweep), transparent 0); animation: srSweep .9s var(--sr-ease) backwards; } /* Зигзаг последних боёв прочерчивается слева направо, точки вспыхивают следом за своим отрезком. */ .sr-seg.sr-go { animation: srDraw .45s var(--sr-ease) backwards; animation-delay: calc(var(--sr-i, 0) * 55ms); } .sr-dot.sr-go { animation: srPop .3s var(--sr-ease) backwards; animation-delay: calc(var(--sr-i, 0) * 55ms + 150ms); } } @keyframes srGrowY { from { transform: scaleY(0) } } @keyframes srGrowX { from { transform: scaleX(0) } } @keyframes srSweep { from { --sr-sweep: 0deg } } @keyframes srPop { from { transform: scale(0); opacity: 0 } } /* Длину отрезка проставляет animate.js: у каждого своя. */ @keyframes srDraw { from { stroke-dashoffset: var(--sr-len, 0) } } /* --------------------------------------------------------------------------- Анимированные края. Референс — Animated Strokes Demo (Figma Community): по контуру фигуры бежит светлый отрезок градиента, сама фигура не двигается. Помечаются не панели отрядов, а отдельные строки игроков — те, у кого есть VIP, админка и прочие права. Панель в составе одна на девять человек, и бегущая по ней рамка выделяла бы весь отряд вместо конкретного игрока. Кольцо рисуется ::after'ом, а не border-image: градиент по border-image не анимируется, а тень пришлось бы блюрить каждый кадр. ::before — тот же отрезок, шире и размытый: он даёт свечение, из-за которого линия читается как горящая, а не просто крашеная. Крутится не элемент, а угол градиента: элемент пришлось бы делать заведомо больше строки и вращать transform'ом. */ @property --sr-edge { syntax: ''; inherits: false; initial-value: 0deg; } @media (prefers-reduced-motion: no-preference) { /* Ничего этого нет, пока animate.js не разметил строку: под reduce-motion состав остаётся ровно таким, каким его нарисовала дизайн-система. */ .sr-edge { position: relative; overflow: hidden; /* свечение не должно лезть на соседей */ } .sr-edge::before, .sr-edge::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; /* Две широкие дуги друг напротив друга: строка низкая и длинная, узкий отрезок половину оборота полз бы по невидимым торцам. */ background: conic-gradient(from var(--sr-edge), transparent 0 4%, var(--sr-edge-c) 17% 33%, transparent 46% 54%, var(--sr-edge-c) 67% 83%, transparent 96% 100%); /* Вырезаем середину: остаётся только полоса шириной с padding. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: srEdge var(--sr-edge-dur, 4.5s) linear infinite; animation-play-state: paused; } .sr-edge::after { z-index: 2; padding: var(--sr-edge-w, 2.5px) } /* Ореол. Отдельная анимация, но заводится с ::after в один кадр и той же длительности, поэтому свечение не отстаёт от линии. */ .sr-edge::before { z-index: 1; padding: calc(var(--sr-edge-w, 2.5px) + 2.5px); filter: blur(3.5px); opacity: .7; } /* Крутится только то, что на экране: строк с правами на составе бывает полтора десятка, и каждая перерисовывает своё кольцо каждый кадр. Класс снимает и вешает animate.js по IntersectionObserver. */ .sr-edge.sr-on::before, .sr-edge.sr-on::after { animation-play-state: running } /* Строка игрока с правами. Красный взят от плашки VS на этом же экране (#e0483a), но на тон горячее — линия тонкая, приглушённый красный на тёмном фоне читался бы как бурый. */ .sr-edge-row { --sr-edge-c: #ff4a38; --sr-edge-w: 2.5px; --sr-edge-dur: 4.5s; } /* Донатная рамка — не два бегущих отрезка одного цвета, а сплошной радужный градиент по всему кольцу: тот же .sr-edge (вращение, маска-кольцо, размытый ореол), только фон ::before/::after переопределён на полный спектр вместо transparent+var(--sr-edge-c). Даём местам, за которые можно задонатить (магазин клана), а не статусу игрока — поэтому отдельный модификатор, а не цвет через --sr-edge-c: одноцветный конус радугу не даст. */ .sr-edge-donate { --sr-edge-w: 2px; --sr-edge-dur: 3.5s; } .sr-edge-donate::before, .sr-edge-donate::after { background: conic-gradient(from var(--sr-edge), #ff5da2, #ffb84d, #ffe66d, #7dffb0, #4dd8ff, #a06bff, #ff5da2); } } @keyframes srEdge { to { --sr-edge: 360deg } }