Css3 keyframes: @keyframes — CSS: Cascading Style Sheets

@keyframes ⚡️ HTML и CSS с примерами кода

Правило @keyframes управляет промежуточными шагами в последовательности анимации CSS, определяя стили для ключевых кадров последовательности анимации.

Это дает больший контроль над промежуточными этапами анимационной последовательности, чем переходы.

@-правила

• @charset
• @import
• @namespace
• @media
• @supports
• @document
• @page
• @font-face
• @keyframes
• @viewport
• @counter-style
• @font-feature-values

Переходы и Анимации

• @keyframes

• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Синтаксис

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  50% {
    margin-left: 50%;
    width: 200%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

Значения

JavaScript может получить доступ к @keyframes правилам с помощью интерфейса объектной модели CSS CSSKeyframesRule.

Чтобы использовать ключевые кадры, создайте правило @keyframes с именем, которое затем используется свойством animation-name. Каждое правило @keyframes содержит список стилей селекторов ключевых кадров, которые определяют проценты вдоль анимации, когда происходит ключевой кадр, и блок, содержащий стили для этого ключевого кадра.

Вы можете перечислить проценты ключевого кадра в любом порядке; они будут обрабатываться в том порядке, в котором они должны произойти.

Действительные списки ключевых кадров

Если правило

@keyframes не определяет начальные или конечные состояния анимации (то есть 0%/from и 100%/to, браузеры будут использовать существующие стили этого элемента для состояний начала и конца. Это можно использовать для анимации элемента из его начального состояния и обратно.

Свойства, которые не могут быть анимированы в правилах @keyframes, игнорируются, но поддерживаемые свойства все равно будут анимированы.

Обработка дубликатов

Если для данного имени существует несколько наборов ключевых кадров, используется последний, который встречается парсером. Правила @keyframes не каскадируются, поэтому анимации никогда не выводят ключевые кадры из нескольких наборов правил.

Если смещение времени анимации дублируется, используется последний ключевой кадр в правиле @keyframes для этого процента. Внутри правила

@keyframes нет каскадирования, если несколько ключевых кадров определяют одинаковые процентные значения.

Когда свойства не заданы в некоторых ключевых кадрах

Свойства, которые не указаны в каждом ключевом кадре, по возможности интерполируются — свойства, которые невозможно интерполировать, удаляются из анимации. Например:

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

Здесь свойство top анимирует, используя 0%, 30% и 100% ключевые кадры, а анимации для left используют 0%, 68% и 100% ключевые кадры.

Когда ключевой кадр определяется несколько раз

Если ключевой кадр определен несколько раз, но не все затронутые свойства находятся в каждом ключевом кадре, учитываются только значения, указанные в последнем ключевом кадре. Например:

@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}

В этом примере на 50% ключевом кадре используется значение top: 10px, а все остальные значения в этом ключевом кадре игнорируются.

Каскадные ключевые кадры поддерживаются начиная с Firefox 14. В приведенном выше примере это означает, что в 50% ключевом кадре будет добавлено значение left: 20px. Это еще не определено в спецификации, но это обсуждается.

!important в ключевых кадрах

Объявления в ключевых кадрах с модификатором !important игнорируются:

@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /* ignored */
  to {
    margin-top: 100px;
  }
}
@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /* ignored */
    margin-bottom: 50px;
  }
}

Спецификации

• CSS Animations

Поддержка браузерами

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse. com.

что это за правило в CSS

Как работают кейфреймы

Пример кейфрейма

Анимация в вебе подразумевает плавный переход объекта от одного состояния к другому. Эти состояния задаются кейфреймами. Если нужно показать, как изображение увеличивается в размере, у него должно быть минимум два ключевых кадра: в изначальном маленьком и в конечном большом размерах. Промежуточные варианты между этими состояниями отрисует сам браузер. Если изменение неравномерное, могут потребоваться и промежуточные кейфреймы.

Объект в разных состояниях, синим подсвечены ключевые точки

Раньше создавать анимацию можно было только через JavaScript. Кейфреймы позволяют использовать CSS. Функция считается экспериментальной. Это значит, что каждый браузер реализует ее по-своему и результат использования кейфреймов может различаться.

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

Поддержка кейфреймов браузерами на февраль 2022 года. Источник

Для чего нужны кейфреймы

Ключевые кадры необходимы для создания анимированных элементов, которые делают интерфейсы веб-приложений и сайтов дружелюбными и интерактивными.

С помощью кейфреймов можно создать движущийся элемент

С их помощью можно создать:

• плавно появляющиеся и исчезающие всплывающие окна;
• изображения, которые плавно увеличиваются при нажатии;
• интерактивные элементы на странице, которые движутся, когда пользователь выполняет определенные действия;
• визуальные эффекты при выполнении действий. Например, мини-анимация возле кнопки лайка при нажатии.

Какие параметры можно задать кейфрейму

Простейшее CSS-правило из двух ключевых кадров выглядит так.

@keyframes <имя кейфрейма> {
from: { описание начального состояния элемента }
to: { описание конечного состояния элемента }
}

Вместо from и to можно использовать 0% и 100%, а если требуются промежуточные варианты — другие значения процентов.

Расскажем, что означают эти параметры.

• Имя кейфрейма. Это уникальная переменная-идентификатор. Когда ключевые кадры будут созданы, необходимо передать кейфрейм в описание стилей для нужного элемента. Он передается по имени — так CSS «узнает», что к элементу требуется привязать правило с определенным идентификатором.

• From и to. Слова переводятся как «от» и «до» и означают начальную и конечную точку анимации. В фигурных скобках после from указывается начальное состояние элемента: его позиция, размеры, цвет и другие параметры. В фигурных скобках после to — соответственно, конечное состояние.

Образец кода кейфреймов. Источник

Когда анимация запустится, браузер будет медленно изменять параметры элемента, чтобы «привести» его из начального состояния в конечное.

• Проценты. Вместо from и to точки можно задавать в процентах. Значение от 0% до 100% показывает, в какой момент воспроизведения анимации элемент должен принять описанные параметры. Например, если написать:

33%: { width: 100px }

то после 33% времени от длины анимации ширина элемента будет равна 100px.

Проценты можно использовать для создания анимации со сложным поведением. Значения, как и в случае с from и to, меняются постепенно.

Как использовать созданный кейфрейм

Чтобы анимация заработала, правило @keyframes надо подключить к описанию стилей для конкретного элемента или их группы. Это описание называется селектором — блоком CSS-кода, где указываются параметры для элементов с заданными характеристиками.

В селектор нужно добавить описание анимации. Это можно сделать с помощью комплексного свойства animation или отдельных более мелких: animation-name, animation-duration и других.

В свойство animation либо animation-name передается имя кейфрейма — тот самый уникальный идентификатор. Потом указывается длительность анимации в секундах или миллисекундах. При необходимости можно добавить задержку для анимации, количество ее повторов, изменения при каждой новой итерации и другие возможности.

Пример анимации с задержкой и вариативным поведением. Источник

Когда страница запускается, анимация работает согласно заданным параметрам.

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

CSS @keyframes Правило

❮ Назад Полное руководство по CSS Далее ❯

Пример

Постепенное перемещение элемента на 200 пикселей вниз:

@keyframes mymove {
от {сверху: 0px;}
to {top: 200px;}
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

---

Определение и использование

Правило @keyframes определяет код анимации.

Анимация создается путем постепенного перехода от одного набора стилей CSS к другому.

Во время анимации можно многократно менять набор стилей CSS.

Укажите, когда произойдет изменение стиля в процентах или с ключевыми словами «от» и «to», что соответствует 0% и 100%. 0% — это начало анимации, 100% — когда анимация завершена.

Совет: Для лучшей поддержки браузера всегда следует определять селекторы 0% и 100%.

Примечание: Используйте свойства анимации для управления внешним видом анимации, а также для привязки анимации к селекторам.

Примечание: Важное правило игнорируется в ключевом кадре (см. последний пример на этой странице).

---

Поддержка браузера

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает правило.

Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.

Недвижимость
@ключевые кадры	43,0 4,0 -вебкит-	10,0	16,0 5,0 -мунц-	9. 0 4.0 -вебкит-	30,0 15,0 -webkit- 12,0 -o-

---

---

Синтаксис CSS

@keyframes animationname { keyframes-selector { CSS-стили;} }

900 20 Значения свойств

Значение	Описание
имя анимации	Обязательно. Определяет имя анимации.
селектор ключевых кадров	Обязательно. Процент продолжительности анимации. Допустимые значения: 0-100% от (аналогично 0%) до (аналогично 100%) Примечание: В одной анимации может быть много селекторов ключевых кадров.
css-стили	Обязательно. Одно или несколько допустимых свойств стиля CSS

---

Дополнительные примеры

Пример

Добавить несколько селекторов ключевых кадров в одну анимацию:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
} 9 0004

Попробуйте сами »

Пример

Изменение множества стилей CSS в одной анимации:

@keyframes mymove {

0%   {верх: 0px; фон: красный; ширина: 100 пикселей;}
  100% {вверху: 200 пикселей; фон: желтый; width: 300px;}
}

Попробуйте сами »

Пример

Много селекторов ключевых кадров с множеством стилей CSS:

@keyframes mymove {
0%   {верх: 0px; слева: 0px; фон: красный;}
  25%  {верх: 0px; слева: 100 пикселей; фон: синий;}
  50%  {верх: 100 пикселей; слева: 100 пикселей; фон: желтый;}
75 % {вверху: 100 пикс. ; слева: 0px; фон: зеленый;}
100% {верх: 0px; слева: 0px; фон: красный;}
}

Попробуйте сами »

Пример

Примечание: Важное правило игнорируется в ключевом кадре:

@keyframes myexample {
from {top: 0px;}
  50%  {top: 100px !important;} /* игнорируется */
to   {top: 200px;}

}

Попробуйте сами »

---

Связанные страницы

Учебник по CSS: CSS-анимация

❮ Предыдущая Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
9000 3

Лучшие ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Интерактивное руководство по анимации ключевых кадров CSS с помощью @keyframes

Введение

Анимации ключевых кадров CSS — это потрясающе . Это один из самых мощных и универсальных инструментов в CSS, и мы можем использовать их для самых разных отличных вещей.

Но их также часто неправильно понимают. Они немного причудливы, и если вы не понимаете этих причуд, их использование может быть довольно неприятным.

В этом уроке мы углубимся в ключевые кадры CSS. Мы выясним, как они работают, и посмотрим, как создать с их помощью довольно шикарную анимацию. ✨

Предполагаемая аудитория

Это руководство написано для разработчиков JavaScript, которые хотят освоиться с CSS. Но он должен подходить для всех разработчиков, знакомых с основами HTML/CSS.

Если вы довольно хорошо разбираетесь в CSS, вы, вероятно, знаете большую часть того, что мы освещаем, но я поделюсь некоторыми довольно интересными и малоизвестными вещами ближе к концу этого поста. 😄

В этом руководстве мы опираемся на знания, полученные в «Интерактивном руководстве по CSS-переходам».

Основная идея анимации ключевых кадров CSS заключается в том, что она интерполирует различные фрагменты CSS.

Например, здесь мы определяем анимацию ключевого кадра, которая плавно изменяет горизонтальное положение элемента от -100% до 0% :

Каждому оператору @keyframes нужно имя! В данном случае мы решили назвать его слайд-ин 9.0024 . Вы можете думать об этом как о глобальной переменной.

Анимации ключевых кадров предназначены для общего использования и многократного использования. Мы можем применить их к определенным селекторам с помощью свойства анимации :

(Чтобы повторно запустить анимацию, обновите панель «Результат», щелкнув значок   .)

продолжительность. Здесь мы сказали, что анимация должна длиться 1 секунду (1000 мс).

Браузер интерполировать объявления в наших блоках из блоков и в блоки в течение указанного периода времени. Это происходит сразу же, как только свойство установлено.

Мы можем анимировать несколько свойств в одном объявлении анимации. Вот более причудливый пример, который изменяет несколько свойств:

В «Интерактивном руководстве по CSS-переходам» мы узнали все о различных функциях синхронизации, встроенных в CSS.

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

Мы можем переопределить его с помощью свойства animation-timing-function :

По умолчанию анимация по ключевым кадрам запускается только один раз, но мы можем управлять этим с помощью свойства animation-iteration-count :

Это довольно редко чтобы указать целое число, подобное этому, но есть одно специальное значение, которое пригодится: бесконечное .

Например, мы можем использовать его для создания счетчика загрузки:

Обратите внимание, что для спиннеров мы обычно хотим использовать линейную функцию синхронизации , чтобы движение было постоянным (хотя это несколько субъективно — попробуйте изменить его и посмотрите, что вы думаете!).

Помимо ключевых слов от и от до , мы также можем использовать проценты. Это позволяет нам добавить более двух шагов:

Проценты относятся к прогрессу анимации. из действительно просто синтаксический сахар? для 0% . А от до это сахар для 100% .

Важно отметить, что функция синхронизации применяется к каждому шагу . Мы не получаем ни одного замедления для всей анимации.

На этой игровой площадке оба спиннера совершают 1 полный оборот за 2 секунды. Но multi-step-spin разбивает его на 4 отдельных шага, и к каждому шагу применяется функция синхронизации:

К сожалению, мы не можем контролировать это поведение с помощью анимации ключевых кадров CSS, хотя равно настраивается с помощью API веб-анимации. Если вы оказались в ситуации, когда пошаговое смягчение проблематично, я бы посоветовал проверить его!

Предположим, мы хотим, чтобы элемент «дышал», надуваясь и сдуваясь.

Мы могли бы настроить его как трехэтапную анимацию:

В течение первой половины продолжительности она увеличивается в 1,5 раза по сравнению с размером по умолчанию. Как только он достигает этого пика, он тратит вторую половину, уменьшаясь до 1x.

Это работает, но есть более элегантный способ добиться того же эффекта. Мы можем использовать анимация-направление свойство:

анимация-направление управляет порядком последовательности. Значение по умолчанию — normal , изменяющееся от 0% до 100% в течение заданного периода времени.

Мы также можем установить наоборот . При этом анимация будет воспроизводиться в обратном порядке от 100% до 0%.

Интересная часть, однако, заключается в том, что мы можем установить его на альтернативный , который переключается между обычным и обратным на последующих итерациях.

Вместо того, чтобы иметь 1 большую анимацию, которая увеличивается и уменьшается, мы устанавливаем нашу анимацию на увеличение, а затем обращаем ее на следующей итерации, заставляя ее уменьшаться.

Половина продолжительности

Первоначально наша анимация «дыхания» длилась 4 секунды. Однако когда мы переключились на альтернативную стратегию, мы сократили продолжительность вдвое, до 2 секунд.

Это потому, что каждая итерация выполняет только половину работы . Всегда требовалось 2 секунды, чтобы вырасти, и 2 секунды, чтобы уменьшиться. Раньше у нас была одна 4-секундная анимация. Теперь у нас есть 2-секундная анимация, для завершения полного цикла которой требуется 2 итерации.

В этом уроке мы рассмотрели множество свойств анимации, и нам пришлось много печатать!

К счастью, как и в случае с transition , мы можем использовать сокращение animation для объединения всех этих свойств.

Приведенную выше анимацию можно переписать:

Есть и хорошая новость: порядок не имеет значения. По большей части эти свойства можно размещать в любом порядке. Вам не нужно запоминать определенную последовательность.

Есть исключение: анимация-задержка , свойство, о котором мы вскоре поговорим, должно идти после длительности, так как оба свойства принимают один и тот же тип значения (миллисекунды/секунды).

По этой причине я предпочитаю исключать задержку из сокращения:

Вероятно, наиболее запутанным аспектом анимации ключевых кадров является режимы заливки . Они являются самым большим препятствием на нашем пути к уверенности в ключевых кадрах.

Начнем с проблемы.

Мы хотим, чтобы наш элемент постепенно исчезал. Сама анимация работает нормально, но когда она заканчивается, элемент снова появляется:

Если бы мы построили график непрозрачности элемента с течением времени, он выглядел бы примерно так:

Почему элемент возвращается к полной видимости? Что ж, объявления в блоках от и от до применяются только во время выполнения анимации .

По истечении 1000 мс анимация упаковывается и отправляется в путь. Декларации в 9От 0023 до блок рассеивается, оставляя наш элемент с любыми объявлениями CSS, которые были определены в другом месте. Поскольку мы нигде больше не устанавливали непрозрачность для этого элемента, он возвращается к своему значению по умолчанию ( 1 ).

Один из способов решить эту проблему — добавить объявление opacity в селектор .box :0023 .box селектор. Однако, как только анимация завершается, это объявление срабатывает и сохраняет поле скрытым.

Специфика?

В CSS конфликты разрешаются на основе «специфики» селектора. Селектор ID ( #login-form ) выиграет битву против первого класса ( .thing ).

А как насчет анимации ключевых кадров? В чем их специфика?

Оказывается, специфичность — не совсем правильный способ думать об этом; вместо этого нам нужно думать о каскадное происхождение.

Итак, мы можем обновить наш CSS так, чтобы свойства элемента соответствовали блоку с по , но действительно ли это лучший способ?

Ссылка на этот заголовок

заполняет вперед

Вместо того, чтобы полагаться на объявления о резервном виде, давайте рассмотрим другой подход, используя -режим анимации :

-режисс анимация, вперед во времени .

"форварды" - очень запутанное название, но, надеюсь, увидев его на этом графике, оно станет немного яснее!

Когда анимация закончится, animation-fill-mode: forwards скопирует/вставит объявления в последний блок, сохраняя их вперед во времени.

Ссылка на этот заголовок

Заливка в обратном направлении

Мы не всегда хотим, чтобы наши анимации запускались сразу! Как и в случае перехода , мы можем указать задержку с помощью свойства animation-delay .

К сожалению, мы столкнулись с похожей проблемой:

Первые полсекунды элемент виден полностью!

CSS в блоках с и с по применяется только во время выполнения анимации. К сожалению, период animation-delay не считается. Итак, в течение этой первой половины секунды CSS в блоке из как будто не существует.

animation-fill-mode имеет еще одно значение, которое может нам здесь помочь: назад . Это применит CSS из первого блока назад во времени .

«Вперед» и «назад» значения путают, но вот аналогия, которая может помочь: представьте, если бы мы записали сеанс пользователя с момента загрузки страницы. Мы могли бы перемещаться вперед и назад в видео. Мы можем перемещаться назад, до того, как анимация началась, или вперед, после того, как анимация закончилась.

Что делать, если мы хотим сохранить анимацию вперед и назад? Мы можем использовать третье значение, и , которое сохраняется в обоих направлениях:

Лично я хотел бы, чтобы и были значением по умолчанию. Это намного более интуитивно понятно! Хотя может немного усложнить понимание того, где было установлено конкретное значение CSS.

Как и все свойства анимации, которые мы обсуждаем, его можно добавить в анимацию стенографический салат:

Анимации ключевых кадров сами по себе достаточно круты, но когда мы смешиваем их с переменными CSS (также известными как пользовательские свойства CSS) , все становится ⚡️ на новый уровень ⚡️.

Предположим, что мы хотим создать анимацию прыгающего мяча, используя все, что мы узнали в этом уроке:

Куб Безье?

Чтобы сделать анимацию отскока немного более реалистичной, я использую пользовательскую функцию синхронизации, используя кубический-безье .

Скоро я опубликую в блоге статью о магии кривых Безье — подпишитесь на мою рассылку, если хотите получать уведомления, когда она будет опубликована! 😄

CSS-анимации должны быть общими и многоразовыми, но эта анимация всегда будет вызывать отскок элемента на 20 пикселей. Разве не было бы здорово, если бы разные элементы могли обеспечивать разную «высоту отскока»?

С переменными CSS мы можем сделать именно это:

Наша @keyframes анимация была обновлена ​​таким образом, что вместо отскока к -20px она обращается к значению свойства --bounce-offset . И поскольку это свойство имеет разное значение в каждом поле, каждое из них отскакивает на разные суммы.

Эта стратегия позволяет нам создавать повторно используемые, настраиваемые анимации ключевых кадров. Думайте об этом как о реквизите компонента React!

Производные значения с расчетом

Итак, что-то меня беспокоит в приведенном выше примере.

При использовании функции translateY положительные значения перемещают элемент вниз, отрицательные значения перемещают элемент вверх. Мы хотим переместить элемент вверх, поэтому мы должны использовать отрицательное значение.

Но это деталь реализации . Когда я хочу применить эту анимацию, странно, что мне нужно использовать отрицательное значение.

Переменные CSS работают лучше всего, когда они являются семантическими. Вместо установки --bounce-offset в отрицательное значение, я бы предпочел сделать это:

Используя calc , мы можем получить истинное значение из предоставленного значения в рамках нашего @keyframes at-rule:

Мы определяем только это анимацию ключевого кадра один раз, но мы, вероятно, будем использовать ее много раз. Стоит оптимизировать «потребительскую» сторону вещей, чтобы сделать ее как можно более приятной в использовании, даже если это немного усложняет определение.

calc позволяет нам создавать идеальные API для анимации ключевых кадров. 💯

Создавая пару последних демонстраций, я понял, насколько изменился CSS за последние несколько лет!

Он стал невероятным языком , выразительным, гибким и мощным. Я люблю писать CSS.

И тем не менее, у очень многих фронтенд-разработчиков очень разные отношения с языком. Я разговаривал с сотнями разработчиков JavaScript, которые находят CSS разочаровывающим и запутанным. Иногда один и тот же CSS ведет себя совершенно по-разному! Это кажется таким непоследовательным.

У меня есть теория на этот счет: в отличие от JS, большая часть CSS является неявной и закулисной. Недостаточно знать свойства ; вам нужно знать принципы управляющие ими.

Последний год я посвятил работе над курсом, который поможет преподавать CSS на более глубоком и фундаментальном уровне.