В этой статье мы исследуем мир анимации в Интернете, используя только CSS. Сначала мы создадим простую анимацию, используя комбинацию SVG и CSS. Затем мы создадим еще пару анимаций, используя только HTML и CSS. Мы также обсудим, когда нам нужно вызывать JavaScript в действие, и ограничения CSS.
К концу этой статьи вы сможете использовать CSS для создания анимации вместо использования JavaScript. Вы также сможете определить, когда вам нужно использовать JavaScript для создания анимации.
Чтобы получить максимальную отдачу от этой статьи, предполагается, что у вас есть хотя бы базовые знания CSS и HTML. Если вы только начинаете заниматься
Анимация с эффектом рисования
Это впечатляющая анимация, которую обманчиво легко создать. Ниже скриншот того, к чему мы стремимся.
финальная анимация
Сначала нам нужно создать SVG для нашего логотипа:
Вот ручка с этой настройкой SVG. Не стесняйтесь разветвлять его, чтобы вы могли выполнить следующие шаги.
Теперь, когда наш SVG на месте, мы устанавливаем
svg {
}
(Обновленная ручка)
Теперь мы можем сосредоточиться на рисовании SVG. Мы добьемся этого, используя CSS
Свойство
Теперь для анимации, которую мы здесь создаем, мы хотим, чтобы пробел и тире были той же длины, что и наш файл path. То есть вся длина нашего контура логотипа будет считаться, так сказать, «одним тире», и один пробел тоже будет на всю длину контура. Идея состоит в том, что мы начнем с контура логотипа в виде промежутка, а затем анимируем контур в виде тире.
Но какой длины контур логотипа? Простой способ справиться с этим — установить длину. Давайте отредактируем наш код SVG, добавив pathLength="1"к каждому пути:
...
...
(Обновленная ручка)
Это значительно упрощает анимацию рисования. Теперь, когда мы установили pathLength, мы также можем установить
svg path {
}
(Обновленная ручка)
Сейчас вроде бы ничего не изменилось, ну да ладно. Весь путь для каждой части логотипа теперь представляет собой одну большую черточку. (Вы можете поэкспериментировать, удалив pathLength="1"один из контуров. Он внезапно станет пунктирной линией шириной 1 пиксель и промежутками.)
Теперь мы можем использовать
svg path {
}
Теперь мы можем анимировать
svg path {
animation: draw 2s forwards;
}
@keyframes draw {
from {
}
to {
}
}
Прохладно! С этим у нас теперь есть это:
Чтобы завершить нашу анимацию, нам просто нужно анимировать в нашем
svg {
width: 40%;
// we set a delay of 2s so it won’t start until our drawing is finished
animation: fadeOpacity 2s forwards 2s;
}
@keyframes fadeOpacity {
from {
}
to {
}
}
Теперь у нас есть финальная анимация:
Бьюсь об заклад, это было намного проще, чем вы думали! Я знаю, что атрибуты
Это быстрый пример мощи CSS в сочетании с SVG. Теперь давайте продвинем это дальше в нашем следующем примере.
CSS анимация свечи
Таким образом, в последнем примере мы немного схитрили, поскольку использовали SVG. В следующем примере мы будем использовать только CSS (и, конечно же, HTML).
С этой анимацией мы будем использовать базовый рисунок CSS. Затем мы создадим триггерное событие с помощью CSS. Наконец, мы будем эмулировать пламя (насколько это возможно!).
Возбужденный? Испуганный? Я оба! Итак, начнем!
Я многое узнал о рисовании с помощью CSS благодаря потрясающему Джею Томпкинсу. Я рекомендую проверить эту замечательную статью для дополнительного чтения.
Примечание: ниже вы увидите, что я использую абсолютное позиционирование и преобразование для позиционирования своих
Ниже показано, что мы хотим нарисовать с помощью CSS:
свеча, которую мы нарисуем
Вы можете следовать вместе со мной, если хотите. Я настроил базовую ручку, на которой настроен корень всего.
Итак, давайте сначала нарисуем основание нашей свечи (поверхность стола).
Мы будем использовать некоторые переменные SCSS для цвета и ширины нашей таблицы:
// table dimensions
$tableWidth: 280px;
$tableHeight: 10px;
$tableBackground: #8b4513;
Таблица в основном divс некоторыми размерами.
Мы можем обновить наш HTML, чтобы он выглядел следующим образом:
Теперь добавим немного базового SCSS (мы используем transformего для центрирования нашей таблицы):
.table {
position: absolute;
left: 50%;
top: 50%;
width: $tableWidth;
height: $tableHeight;
background: $tableBackground;
transform: translate (-50%, -50%) ;
}
Это будет выглядеть немного безжизненно. Хитрость рисунков CSS заключается в использовании
.table {
...
}
Теперь у вас должно быть это:
Потрясающий!
Давайте сейчас поставим свечу на тот стол. Мы настроим несколько переменных SCSS для размеров и цвета нашей свечи (не стесняйтесь использовать любые размеры, которые вам нравятся):
// candle
$candleWidth: 35px;
$candleHeight: 130px;
$candleBorderColor: #673c63;
$stickWidth: 3px;
$stickHeight: 15px;
Если вы посмотрите на изображение свечи, которое я показал ранее, вы увидите, что это, по сути, divбольшая свеча borderс палкой наверху. Давайте сначала нарисуем саму свечу.
Сначала мы обновляем наш HTML:
Теперь добавим наш CSS (опять же,
.candle {
position: absolute;
left: 50%;
top: 50%;
width: $candleWidth;
height: $candleHeight;
background: #fff;
transform: translate (-50%, -100%) ;
border: 3px solid $candleBorderColor;
}
Прохладно! У нас есть свеча!
Теперь добавим нашу палку сверху (мы уже указали размеры для этого выше).
Сначала нам нужно добавить его в наш HTML:
CSS (здесь ничего особенного):
.
width: $stickWidth;
height: $stickHeight;
background: #673c63;
position: absolute;
left: 50%;
top: 0%;
background: $candleBorderColor;
transform: translate (-50%, -100%) ;
}
Мы успешно нарисовали нашу свечу:
Как видите, анимации здесь нет, так что давайте начнем с анимации.
Сначала мы добавим кнопку, которая изменит цвет фона со светлого на темный (мы уже настроили эти переменные SCSS — $lightBackgroundи $darkBackground). Добавьте это в самый верх HTML:
Это даст нам не очень привлекательный флажок и метку. Итак, давайте стилизуем это, чтобы оно выглядело немного лучше:
label {
background: #a5d6a7;
padding: 0.5rem 1rem;
position: absolute;
font: 900 24px/1.4 -
transform: translate (50%, 50%) ;
cursor: pointer;
}
Это придает метке немного стиля, но мы также хотим скрыть флажок из поля зрения. Теперь мы можем сделать это, добавив hiddenатрибут в
Затем мы перемещаем флажок влево с помощью этого CSS:
.
position: absolute;
left: -100vw;
}
Давайте также предоставим визуальную подсказку, когда флажок находится в фокусе:
input: checked + label {
outline: 1px dotted red;
}
(Если вам было интересно, почему я поместил inputперед labelв HTML, теперь вы знаете, почему. Это для того, чтобы мы могли использовать родственный селектор (+). Позже мы воспользуемся другим.)
Теперь вам, вероятно, не нравится этот красный пунктирный контур вокруг кнопки, но я оставлю вам возможность придумать
Вот что мы имеем сейчас:
Давайте изменим фон страницы в зависимости от того, установлен флажок или нет. Мы можем сделать это без использования JavaScript, используя общий селектор родственных элементов ~:
#toggle: checked ~.wrapper {
background: $lightBackground;
}
Теперь мы также можем добавить переход, чтобы он был более плавным:
.wrapper {
height: 100vh;
width: 100vw;
transition:
}
Теперь у нас есть это:
Прохладно!
Еще мы добавим пламя, когда фон яркий.
Как и раньше, мы настраиваем наши переменные SCSS:
// flame
$flameHeight: 20px;
$flameWidth: 16px;
$flameColor1: #e25822;
$flameColor2: #e2b822;
Давайте также обновим HTML, включив в него пламя:
Основу нашего пламени нужно использовать
Итак, вот наш CSS (
.flame {
width: $flameWidth;
height: $flameHeight;
background: #673c63;
position: absolute;
left: 50%;
top: 0%;
background: $flameColor1;
transform: translate (-50%, -170%) ;
}
Это дает нам следующее:
Теперь мы можем добавить небольшую анимацию, чтобы оно мерцало, как настоящее пламя. Мы изменим пламя между двумя цветами ($flameColor1и $flameColor2), а также немного изменим положение слева и справа.
@keyframes
from {
background: $flameColor1;
left: 47%;
}
to {
background: $flameColor2;
left: 53%;
}
}
Затем нам нужно добавить эту анимацию в flameкласс:
animation:
Наше пламя теперь будет мерцать:
Не стесняйтесь попробовать улучшить это, так как это может быть лучше!
Хорошо, давайте сделаем дополнительную настройку. Мы выключим пламя, когда фон станет темным.
Мы будем использовать opacityдля достижения этого. В flameклассе добавьте непрозрачность. Мы также добавим к нему переход, чтобы он соответствовал background:
.flame {
...
opacity: 0;
transition: opacity 0.6s ease;
}
Затем мы можем использовать мощь SCSS и некоторую вложенность checkedсостояний:
#toggle: checked ~.wrapper {
background: $lightBackground;
.flame {
opacity: 1;
}
}
Теперь пламя появляется только на светлом фоне:
Наконец, текст «Trigger Candle» на этикетке немного пресный. Мы могли бы многое сделать с этим! Итак, давайте улучшим нашу метку, чтобы текст переключался между «Lumos» и «Nox» — конечно, вдохновленный Гарри Поттером!
Во- первых, мы можем изменить нашу метку, чтобы она не содержала текста (мы будем использовать contentего для добавления текста):
Теперь мы добавим немного CSS для переключения текста:
label: after {
content: «Lumos»;
}
#toggle: checked ~ label: after {
content: «Nox»;
}
А чтобы метка перестала прыгать, добавим следующие стили:
label {
...
}
И вот оно. Наша анимация свечи закончена — без следа JavaScript!
В качестве дополнительного бонуса, если вы не знакомы с SCSS и хотите поэкспериментировать с пользовательскими свойствами CSS (также известными как переменные), вот чисто
Импульсная анимация
Это менее сложная анимация, но она показывает, что вы можете сделать, используя лишь немного CSS.
Для начала нам нужно сделать круг. Давайте сначала добавим немного HTML:
Теперь мы можем использовать немного CSS для создания нашего круга:
.pulse {
position: absolute;
left:50%;
top:50%;
transform: scale (1.5,1.5) translate (-50%, -50%) ;
height: 150px;
width: 150px;
background: #a83f39;
}
Это то, что мы имеем до сих пор:
Для создания пульсирующей анимации мы используем
@keyframes pulse {
0% {
}
70% {
}
100% {
}
}
Чтобы использовать эту анимацию, нам просто нужно добавить это в.pulse:
.pulse {
...
animation: pulse 2s infinite;
}
Теперь мы создали нашу анимацию пульса. Не слишком потрепанный, а?
Что вы не можете сделать с CSS?
Как бы я ни любил анимацию CSS, есть вещи, которые невозможно или очень сложно сделать.
Вы не можете искать через анимацию CSS или переходить к определенной части анимации. Таким образом, адаптировать вашу анимацию на основе положения щелчка пользователя было бы очень сложно. Чтобы добиться этого с помощью JavaScript, я бы рекомендовал использовать гениальную библиотеку GreenSock.
Анимировать по кривой очень сложно.
Анимации, включающие прокрутку, также сложны, хотя Крис Койер объясняет, как вы можете сделать это с помощью небольшого количества JavaScript.
Анимация высоты элемента по автоматически рассчитанной высоте.
Последовательность нескольких анимаций также довольно сложна. Вы можете добиться этого с помощью задержек, но для сложных анимаций с большим количеством движущихся частей это может быть очень сложно. Опять же, это намного проще с библиотекой GreenSock.
Выше приведены некоторые из ключевых ограничений анимации CSS. Некоторые из них можно обойти с помощью SVG, но в целом вышеперечисленное гораздо проще выполнить с помощью JavaScript.
Вывод
Я надеюсь, что прочитав эту статью, вы получите новое понимание