CSS-анимация на примере аналоговых часов

Классический разбор того, как знание спецификации заменяет скрипты. Автор воссоздал реалистичные часы, используя только возможности CSS3.

Адаптивность через em: Один font-size родителя масштабирует все часы пропорционально (включая тени и засечки).

Реалистичный хром: Многослойные box-shadow (внешние и inset) создают объем и металлический блеск без картинок.

Вложенные transform: rotate(): Умная расстановка минутных делений по кругу с помощью всего нескольких тегов .

Тиканье стрелки: Анимация с animation-timing-function: steps(60) вместо плавного вращения.

Понимание вложенных трансформаций и оптимизации рендеринга помогает делать производительные UI-анимации, не нагружая Main Thread.

📖 Детали реализации на Хабре: https://habr.com/ru/articles/171015/

👉

@frontend_mind