Как сделать анимацию в css

Мини-туториал по анимации в CSS и HTML5

Рассказываем, как сделать анимацию без использования JavaScript. Пишем страницу авторизации пользователя на CSS и HTML5.

За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.

В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.

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

Давайте рассмотрим пример, где мы меняем цвет фона у элемента.

Создадим в HTML элемент с классом «element»:

В CSS создаем правило для анимации в блоке keyframes. Назовем анимацию changeColor. Анимация будет менять цвет фона объекта с красного на синий.

@keyframes changeColor < 0% < background-color: red; >100% < background-color: blue; >> 

Здесь 0% — это начало анимации, 100% — это конец анимации. Все что между движок CSS автоматически анимирует в плавное изменениe свойста, которое вы выбрали. В данном случае будет плавное изменение цвета.

Теперь добавим эту анимацию как свойство animation в CSS стилях для элемента. Наш CSS будет выглядеть таким образом:

.element

Результат данной анимации будет выглядеть так:

Мы можем контролировать анимацию при помощи дополнительных свойств.

В данном примере после имени анимации мы указали скорость анимации (2s) и количество повторений (в данном случае бесконечное количество повторений infinite).

Существует несколько свойств анимации. Рассмотрим каждый из них:

• animation-name: имя анимации определенным правилом keyframes
• animation-duration: сколько времени займет один цикл анимации от 0% до 100%
• animation-timing-function: определяет кривые ускорения, такие как ease и linear
• animation-delay: время задержки между моментом загрузки элемента в браузере и началом анимации.
• animation-direction: указывает направление анимации. По умолчанию анимация идет от 0% до 100%. С помощью данного свойства можно сделать так, чтобы анимация шла в обратную сторону от 100% до 0% или каждый раз меняла направление.
• animation-iteration-count: количество повторений цикла анимации. Можно установить число или указать infinite для бесконечного повторения анимации.
• animation-fill-mode: устанавливает значение, которое устанавливается до начала или после окончания анимации. Например, можно указать, что после завершения всех циклов анимации фон элемента будет зеленый.
• animation-play-state: проигрывает/ставит на паузу анимацию

Свойства анимации указываются таким образом:

.element

Все эти свойства можно записать и одной строкой:

.element

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

Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:

@keyframes changeColor < 0% < background-color: red; >50% < background-color: yellow; >100% < background-color: blue; >> 

HTML элементу можно одновременно присвоить несколько анимаций. Давайте добавим нашему элементу анимацию move, которая будет двигать элемент влево и вправо.

Добавим новый блок keyframes

@keyframes move < 0% < margin-left: 0px; >100% < margin-left: 200px; >> 

Перечислим анимации через запятую

animation: changeColor 3s infinite, move 4s infinite alternate; 

Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.

Практические примеры

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

Анимация спиннера загрузки

Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.

В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.

@keyframes rotate < from to > 

Далее мы использовали эту анимацию в списке стилей для элемента:

animation: rotate 1.5s infinite linear 

Анимированная форма авторизации

Давайте создадим что-то посложнее. Например анимированную форму авторизации.

Сделаем зацикленную анимацию для кнопки Submit. Добавим анимированный эффект для наведения курсора на кнопку. Сделаем так же анимацию для лейблов Username и Password в момент, когда поля ввода в фокусе.

Обратите внимание на несколько span в кнопке Submit. Именно их мы потом и будем анимировать.

Добавим статические стили в CSS, чтобы наша форма выглядела красиво:

html < height: 100%; >body < margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); >.login-box < position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; >.login-box h2 < margin: 0 0 30px; padding: 0; color: #fff; text-align: center; >.login-box .user-box < position: relative; >.login-box .user-box input < width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; >.login-box .user-box label < position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; >.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label < top: -20px; left: 0; color: #03e9f4; font-size: 12px; >.login-box form a < position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px >.login-box a:hover

Теперь добавим анимации. Анимировать мы будем элементы в кнопке Submit.

Добавим 4 блока keyframes с правилами анимации:

@keyframes btn-anim1 < 0% < left: -100%; >50%,100% < left: 100%; >> @keyframes btn-anim2 < 0% < top: -100%; >50%,100% < top: 100%; >> @keyframes btn-anim3 < 0% < right: -100%; >50%,100% < right: 100%; >> @keyframes btn-anim4 < 0% < bottom: -100%; >50%,100% < bottom: 100%; >> 

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

Добавим теперь эту анимацию каждому элементу:

.login-box a span:nth-child(1) < animation: btn-anim1 1s linear infinite; >.login-box a span:nth-child(2) < animation: btn-anim2 1s linear infinite; animation-delay: .25s >.login-box a span:nth-child(3) < animation: btn-anim3 1s linear infinite; animation-delay: .5s >.login-box a span:nth-child(4)

Как видите, мы добились стильной анимации, используя только HTML и CSS.

Заключение

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

CSS-анимации

CSS позволяет создавать простые анимации без использования JavaScript.

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

CSS-переходы

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

Всё что нам нужно, чтобы начать анимацию – это изменить свойство, а дальше браузер сделает плавный переход сам.

Например, CSS-код ниже анимирует трёх-секундное изменение background-color :

.animated

Теперь, если элементу присвоен класс .animated , любое изменение свойства background-color будет анимироваться в течение трёх секунд.

Нажмите кнопку ниже, чтобы анимировать фон:

  #color  

Существует 4 свойства для описания CSS-переходов:

• transition-property – свойство перехода
• transition-duration – продолжительность перехода
• transition-timing-function – временная функция перехода
• transition-delay – задержка начала перехода

Далее мы рассмотрим их все, а сейчас ещё заметим, что есть также общее свойство transition , которое позволяет задать их одновременно в последовательности: property duration timing-function delay , а также анимировать несколько свойств одновременно.

Например, у этой кнопки анимируются два свойства color и font-size одновременно:

  #growing  

Теперь рассмотрим каждое свойство анимации по отдельности.

transition-property

В transition-property записывается список свойств, изменения которых необходимо анимировать, например: left , margin-left , height , color .

Анимировать можно не все свойства, но многие из них. Значение свойства all означает «анимируй все свойства».

transition-duration

В transition-duration можно определить, сколько времени займёт анимация. Время должно быть задано в формате времени CSS: в секундах s или миллисекундах ms .

transition-delay

В transition-delay можно определить задержку перед началом анимации. Например, если transition-delay: 1s , тогда анимация начнётся через 1 секунду после изменения свойства.

Отрицательные значения также допустимы. В таком случае анимация начнётся с середины. Например, если transition-duration равно 2s , а transition-delay – -1s , тогда анимация займёт одну секунду и начнётся с середины.

Здесь приведён пример анимации, сдвигающей цифры от 0 до 9 с использованием CSS-свойства transform со значением translate :

stripe.onclick = function() < stripe.classList.add('animate'); >;

#digit < width: .5em; overflow: hidden; font: 32px monospace; cursor: pointer; >#stripe < display: inline-block >#stripe.animate

     Кликните на цифру для начала анимации: 

Свойство transform анимируется следующим образом:

#stripe.animate

В примере выше JavaScript-код добавляет класс .animate к элементу, после чего начинается анимация:

stripe.classList.add('animate');

Можно начать анимацию «с середины», с определённого числа, например, используя отрицательное значение transition-delay , соответствующие необходимому числу.

Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:

stripe.onclick = function() < let sec = new Date().getSeconds() % 10; stripe.style.transitionDelay = '-' + sec + 's'; stripe.classList.add('animate'); >;

#digit < width: .5em; overflow: hidden; font: 32px monospace; cursor: pointer; >#stripe < display: inline-block >#stripe.animate

     Click below to animate: 

JavaScript делает это с помощью нескольких строк кода:

stripe.onclick = function() < let sec = new Date().getSeconds() % 10; // например, значение -3s здесь начнут анимацию с третьей секунды stripe.style.transitionDelay = '-' + sec + 's'; stripe.classList.add('animate'); >;

transition-timing-function

Временная функция описывает, как процесс анимации будет распределён во времени. Будет ли она начата медленно и затем ускорится или наоборот.

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

Это свойство может принимать два вида значений: кривую Безье или количество шагов. Давайте начнём с кривой Безье, как с наиболее часто используемой.

Кривая Безье

Временная функция может быть задана, как кривая Безье с 4 контрольными точками, удовлетворяющими условиям:

1. Первая контрольная точка: (0,0) .
2. Последняя контрольная точка: (1,1) .
3. Для промежуточных точек значение x должно быть 0..1 , значение y может принимать любое значение.

Синтаксис для кривых Безье в CSS: cubic-bezier(x2, y2, x3, y3) . Нам необходимо задать только вторую и третью контрольные точки, потому что первая зафиксирована со значением (0,0) и четвёртая – (1,1) .

Временная функция описывает то, насколько быстро происходит анимации во времени.

• Ось x – это время: 0 – начальный момент, 1 – последний момент transition-duration .
• Ось y указывает на завершение процесса: 0 – начальное значение свойства, 1 – конечное значение.

Самым простым примером анимации является равномерная анимация с линейной скоростью. Она может быть задана с помощью кривой cubic-bezier(0, 0, 1, 1) .

Вот как выглядит эта «кривая»:

…Как мы видим, это прямая линия. Значению времени ( x ) соответствует значение завершённости анимации ( y ), которое равномерно изменяется от 0 к 1 .

В примере ниже поезд «едет» слева направо с одинаковой скоростью (нажмите на поезд):

.train

В свойстве transition указана следующая кривая Безье:

.train < left: 0; transition: left 5s cubic-bezier(0, 0, 1, 1); /* JavaScript устанавливает свойство left равным 450px */ >

…А как показать замедляющийся поезд?

Мы можем использовать другую кривую Безье: cubic-bezier(0.0, 0.5, 0.5 ,1.0) .

Как видим, анимация начинается быстро: кривая быстро поднимается вверх, и затем все медленнее и медленнее.

Ниже временная функция в действии (нажмите на поезд):

.train

.train < left: 0; transition: left 5s cubic-bezier(0, .5, .5, 1); /* JavaScript устанавливает свойство left равным 450px */ >

Есть несколько встроенных обозначений кривых Безье: linear , ease , ease-in , ease-out и ease-in-out .

linear это короткая запись для cubic-bezier(0, 0, 1, 1) – прямой линии, которую мы видели раньше.

Другие названия – это также сокращения для других cubic-bezier :

* – используется по умолчанию, если не задана другая временная функция.

Для того, чтобы замедлить поезд, мы можем использовать ease-out :

.train < left: 0; transition: left 5s ease-out; /* transition: left 5s cubic-bezier(0, .5, .5, 1); */ >

Но получившийся результат немного отличается.

Кривая Безье может заставить анимацию «выпрыгивать» за пределы диапазона.

Контрольные точки могут иметь любые значения по оси y : отрицательные или сколь угодно большие. В таком случае кривая Безье будет скакать очень высоко или очень низко, заставляя анимацию выходить за её нормальные пределы.

В приведённом ниже примере код анимации:

.train < left: 100px; transition: left 5s cubic-bezier(.5, -1, .5, 2); /* JavaScript sets left to 400px */ >

Свойство left будет анимироваться от 100px до 400px .

Но когда вы нажмёте на поезд, вы увидите следующее:

• Сначала, поезд поедет назад: left станет меньше, чем 100px .
• Затем он поедет вперёд, немного дальше, чем 400px .
• И затем вернётся назад в значение 400px .

.train

Если мы взглянем на кривую Безье из примера, становится понятно поведение поезда.

Мы вынесли координату y для первой опорной точки ниже нуля и выше единицы для третьей опорной точки, поэтому кривая вышла за пределы «обычного» квадрата. Значения y вышли из «стандартного» диапазона 0..1 .

Как мы знаем, ось y измеряет «завершённость процесса анимации». Значение y = 0 соответствует начальному значению анимируемого свойства и y = 1 – конечному значению. Таким образом, y1 – больше конечного.

Это, конечно, «мягкий» вариант. Если значение y будут -99 и 99 , то поезд будет гораздо сильнее «выпрыгивать» за пределы.

Как сделать кривую Безье необходимую для конкретной задачи? Существует множество инструментов.

• К примеру, мы можем сделать это на сайте https://cubic-bezier.com.
• Браузернные инструменты разработчика также имеют специальную поддержку для создания кривых Безье в CSS:
  1. Откройте инструменты разработчика при помощи F12 (Mac: Cmd + Opt + I ).
  2. Выберете вкладку Elements , затем обратите внимание на под-панель Styles в правой стороне.
  3. Свойства CSS со словом cubic-bezier будут иметь иконку перед этим словом.
  4. Кликните по иконке, чтобы отредактировать кривую.

Шаги

Временная функция steps(количество шагов[, start/end]) позволяет разделить анимацию на шаги.

Давайте рассмотрим это на уже знакомом нам примере с цифрами.

Ниже представлен список цифр, без какой-либо анимации, который мы будем использовать в качестве основы:

CSS-анимации

Большой набор свойств для создания настоящих живых анимаций.

Время чтения: 13 мин

Открыть/закрыть навигацию по статье

1. Кратко
2. @keyframes
3. animation-name
4. animation-duration
5. animation-iteration-count
6. animation-direction
7. animation-timing-function
   1. linear
   2. ease
   3. ease-in
   4. ease-out
   5. ease-in-out
   6. cubic-bezier(x1, y1, x2, y2)
   7. step-start
   8. step-end
   9. steps(количество шагов, положение шага)

   Контрибьюторы:

   • Светлана Коробцева ,
   • Антон Капустинский

   Обновлено 28 августа 2023

   Кратко

   Скопировать ссылку «Кратко» Скопировано

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

   

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

    .child-one  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in;> .child-one  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in; >    Скопировать Скопировано Не удалось скопировать   

   Анимация стала более естественной, не такой компьютерной.

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

    .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in;> .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; >    Скопировать Скопировано Не удалось скопировать   

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

   animation — delay

   Скопировать ссылку «animation-delay» Скопировано

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

   Если значение положительное, то будет задержка перед началом анимации. Если значение отрицательное, то анимация начнётся как бы за кадром.

   Пусть анимация правого элемента начнётся с задержкой -2.5 секунды. Так она будет начинаться с середины:

    .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: -2.5s;> .child-two  animation-name: circle-to-square; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: -2.5s; >    Скопировать Скопировано Не удалось скопировать   

   animation — play — state

   Скопировать ссылку «animation-play-state» Скопировано

   Свойство, позволяющее ставить анимацию на паузу и запускать снова.

   • running — анимация проигрывается (значение по умолчанию).
   • paused — анимация ставится на паузу. При повторном запуске анимации она продолжается с того места, где была остановлена.

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

    .child:hover  animation-play-state: paused;> .child:hover  animation-play-state: paused; >    Скопировать Скопировано Не удалось скопировать   

   animation — fill — mode

   Скопировать ссылку «animation-fill-mode» Скопировано

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

   • none — стили анимации не применяются до и после проигрывания анимации (значение по умолчанию).
   • forwards — после окончания анимации элемент сохранит стили последнего ключевого кадра.
   • backwards — после окончания анимации к элементу будут применены стили первого ключевого кадра.
   • both — до начала анимации к элементу применяется первый ключевой кадр, а после окончания анимации элемент останется в состоянии последнего ключевого кадра.

   Для лучшего понимания работы этих значений посмотрите демо ��

   animation

   Скопировать ссылку «animation» Скопировано

   animation — это мега-шорткат, в котором можно за раз указать значения для всех перечисленных выше свойств, начинающихся на animation — .

   Значения указываются через пробел. Порядок указания значений не важен. Из-за того, что значения этих свойств очень разные, браузер сам догадывается, какое значение к какому свойству относится. Важно только помнить, что первое значение времени будет воспринято как значение animation — duration (длительность анимации), а второе — animation — delay (задержка воспроизведения).

   Для работы анимации совсем не обязательно перечислять все значения. Достаточно указать имя анимации и её длительность. Для остальных свойств будут установлены значения по умолчанию.

    .child-two  animation: circle-to-square 2s infinite alternate-reverse ease-in 1s;> .child-two  animation: circle-to-square 2s infinite alternate-reverse ease-in 1s; >    Скопировать Скопировано Не удалось скопировать   

   Несколько анимаций

   Скопировать ссылку «Несколько анимаций» Скопировано

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

   Например, разобьём предыдущую анимацию на две отдельные. Одна будет отвечать за изменение формы элемента, а вторая за изменение цвета.

    @keyframes circle-to-square  from  width: 50px; height: 50px; > 50%  width: 100%; height: 50px; > to  width: 100%; height: 100%; >> @keyframes color-change  from  background-color: #F498AD; > 50%  background-color: #7F6EDB; > to  background-color: #2E9AFF; >> @keyframes circle-to-square  from  width: 50px; height: 50px; > 50%  width: 100%; height: 50px; > to  width: 100%; height: 100%; > > @keyframes color-change  from  background-color: #F498AD; > 50%  background-color: #7F6EDB; > to  background-color: #2E9AFF; > >    Скопировать Скопировано Не удалось скопировать   

   И присвоим обе анимации одному элементу, при этом задав первой задержку, и указав разное время воспроизведения.

    .child  animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite;> .child  animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite; >    Скопировать Скопировано Не удалось скопировать   

   В итоге форма меняется за 10 секунд, а цвет перетекает из розового в синий за 5 секунд. А потом обратно. Очень красиво и медитативно ��

   CSS-анимации: что это и как научиться их настраивать

   На некоторых сайтах вас встречают красивые всплывающие меню и кнопки, которые меняют вид при наведении мышки, клике или прокрутке страницы. Такие эффекты называются анимацией — они влияют на общее впечатление от ресурса и легкость пользования сайтом. Чем плавнее переходы и необычнее анимация, тем больший вау-эффект произведет на посетителя ваш сайт. Добиться плавности и других свойств анимации помогает CSS — в статье расскажем, что это за язык и как с его помощью сделать простую анимацию элементов сайта.

   Что такое CSS

   В начале двухтысячных за анимацию отвечала технология Flash. Она была требовательной к ресурсам компьютера — сайты с «флешем» грузились очень долго. На смену Flash пришла анимация на JavaScript, или JS, — этот язык помог сделать сайты интерактивными, не требуя больших ресурсов. Сегодня анимацию веб-ресурсов делают в основном на языке CSS (Cascading Style Sheets, или каскадные таблицы стилей) — этот язык отвечает за стиль веб-страницы. Для сложных анимаций советуют использовать JS, но часто CSS может обойтись без помощи JavaScript. HTML создает структуру страницы, а CSS — ее внешний вид. Чтобы CSS-стили заработали, нужно совместить их с HTML-документом, в котором прописана ваша веб-страница.

   Что означают каскады в CSS

   Разберемся, что за каскады имеют в виду, когда говорят про каскадные таблицы стилей. Мы организуем стили в CSS каскадом — один за одним. Если прописать несколько однотипных стилей последовательно, учитываться будет только последний. Например:

   В этом примере мы присвоили элементу Title размер шрифта 18 и два цвета — синий и черный. Но в итоге текст будет черного цвета, потому что этот параметр идет последним. Сколько бы цветов мы ни поставили перед ним, учитываться будет только последний

   Результат будет такой же, если оставить только черный цвет:
   Удаление лишнего синего цвета не повлияет на итог: объект получится черного цвета

   Как добавить стили в CSS-файл

   Чтобы не прописывать стили в тексте HTML-документа, нужен новый файл с расширением CSS и названием на латинице. В нем прописываем свойства объекта по принципу: селектор < свойство: значение; >Селектор — тег HTML, целый класс объектов или ID одного объекта. Свойство — параметр, который мы задаем. Например, цвет. Значение — нужный вариант параметра. Например, красный. Рассмотрим пример с сайта Geekbrains: .my-class < background-color: # 999 ; > Здесь у всех объектов с селектором my-class будет серый фон. #999 — это значение цвета. Также его можно указать словом — например, blue.

   Как добавить CSS-файл в HTML-документ

   Мы прописываем стили в отдельном документе с расширением .css и добавляем ссылку на этот файл в наш HTML. Для этого нужны: — CSS-файл со стилем. Он может лежать на жестком диске в одной папке с HTML или быть в интернете — тогда доступ к файлу придется давать через его URL-адрес; — тег , через который мы связываем HTML с нужным CSS-файлом; — атрибут rel=»stylesheet». Он показывает браузеру, что добавляемый файл — это таблица стилей, она же stylesheet; — ссылка на файл через команду href. Если CSS-файл лежит в одной папке с HTML, то мы просто прописываем его название. Например, нам нужно добавить файл style.css — тогда ссылка будет выглядеть как: href=»style.css» — если CSS-файл лежит в интернете, то мы прописываем его прямой адрес. Например: href=»https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/CSS/bootstrap.min.CSS»

   Так будет выглядеть ссылка на файл со стилями, если он в одной папке с HTML (строка 2) или выложен в сеть и имеет свой URL (строка 4)

   Отличия CSS-анимации от JS

   JS-анимацию используют не реже, чем CSS, — выбор зависит от ваших целей. Разработчики из Google советуют обращаться к CSS для простых решений типа переключения состояния элементов в интерфейсе. JS-анимация помогает, когда нужны сложные эффекты: отскоки, замедления или перемотка назад.

   Пример сложной управляемой анимации, построенной на JS. Доступен на codepen.io

   CSS-анимация — простейший способ привести элементы на экране в движение. Чтобы воссоздать на JS аналог CSS-анимации, потребуется либо громоздкий код, либо дополнительная библиотека типа jQuery. В ней развернутые действия прописаны как одна команда. Это упрощает работу с библиотекой, но не делает ее такой же простой, как работа с CSS.

   Конструкторы и готовые библиотеки CSS-анимации

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

   СSS Animations Generator

   CSS Animations Generator помогает настроить анимацию и форму объектов, фон, цвет и параметры текста.

   На сайте также можно выбрать, какие эффекты объекта вам нужны: появление, исчезновение или изменение фона

   Justinaguilar

   Justinaguilar — пример библиотеки готовых CSS-анимаций, которые нужно только скачать и вставить на сайт. Останется лишь применить эффект к нужному объекту на странице.

   По клику на название анимации красный квадрат покажет, как она выглядит

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

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

   Minimamente

   Ресурс Minimamente предлагает 64 варианта готовой анимации. Здесь нет пошаговой инструкции, как добавить нужные CSS-действия в код страницы.

   На странице Minimamente сразу можно посмотреть, какой эффект произведет выбранная анимация

   Как настроить CSS-анимацию

   Как мы уже говорили, для CSS-анимации на странице нужно два элемента: — объект, который нужно анимировать. Его прописываем в HTML-файле; — параметры объекта и анимации. Их прописываем в CSS-файле. Помните: чтобы анимация работала, ссылка на CSS должна быть прописана в HTML-документе. Как это сделать — рассказывали выше в разделе «Как добавить CSS-файл в HTML-документ».

   При загрузке страницы

   Анимация, которую мы видим при загрузке сайта, называется «прелоадер». Прелоадер помогает посетителю дождаться загрузки страницы. Если сайт грузится долго, а на экране ничего не происходит, посетитель может уйти. Разберем пример такой анимации, представленный на сайте itchief. Для начала автор создает в HTML три контейнера для анимации после тега : .preloader, .preloader_row и .preloader_item: Далее нужно настроить параметры для каждого контейнера в CSS-файле: координаты, анимацию, порядок кадров keyframes. Посмотреть и поэкспериментировать с кодом и итоговым результатом можно здесь.

   Анимация фона

   С помощью CSS можно анимировать фон страницы. Например, как описано на ресурсе Atuin: Создаем в HTML-документе контейнер для фона. Текст поверх фона можно написать любой:

   Анимация графического фона на CSS

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

   При наведении курсора

   Чтобы запустить анимацию при наведении курсора на объект, нужна команда hover. В примере: 1. Создаем в HTML кнопку с текстом «Пример ховера», которая должна поменять свое состояние при наведении курсора. Для этого нужна команда: Пример ховера 2. В CSS-файле задаем параметры кнопки: границы, цвет, размер шрифта: button < border: none; background: #3a7999; color: #80A6FF; padding: 10px; font-size: 20px; border-radius: 5px; position: relative; box-sizing: border-box; transition: all 400ms ease; >3. После параметров кнопки добавляем нужный эффект hover, где прописываем, как должна измениться кнопка при наведении курсора: button:hover < background: rgba(0.7,0.7,0.7,0.7); color: #00bfff; box-shadow: inset 0 0 0 3px #00000; >

   Сейчас при наведении курсора кнопка должна менять цвет

   Исчезновение и появление

   Разберемся на примере прямоугольника, как настроить плавное появление или исчезновение объекта: 1. Пишем в HTML команду для создания прямоугольника: 2. В CSS-файле задаем параметры прямоугольника — размеры, цвет и анимацию: #rectangle < width:200px; height:100px; background:blue; animation: myAnim 1s ease 0s infinite normal forwards; >В строке animation выставлена длина анимации в 1 секунду и бесконечное повторение — infinite. Вместо infinite можно цифрами задать нужное число повторов. Например, 25. 3. После параметров прямоугольника добавляем параметры анимации. Прописываем, что на старте анимации он полностью залит цветом, а в конце — бесцветный: @keyframes myAnim < 0% < opacity: 1; >100% < opacity: 0; >> 4. Чтобы прямоугольник не исчезал, а появлялся, нужно просто поменять местами параметры прозрачности в последнем шаге. Для этого в первом параметре opacity пишем 0, а во втором — 1: keyframes myAnim < 0% < opacity: 0; >100% < opacity: 1; >> Попробуйте поменять параметры прозрачности самостоятельно.

   Появление текста

   Чтобы создать эффект появления текста, создаем класс с текстом в HTML-документе: 1. В HTML пишем

   Пример появления текста

   2. Далее в CSS-файле настроим этот класс. Нужно прописать ширину блока, цвет, размер и шрифт текста. Также добавляем параметры анимации (5 секунд, выполнить за 50 шагов). Командами white-space:nowrap и overflow:hidden прячем текст до срабатывания анимации: .text-typing < width: 40em; color:blue; font-size: 22px; font-family: 'Arial'; white-space:nowrap; overflow:hidden; animation: type 5s steps(50, end) 1; >3. Добавляем @keyframes для запуска анимации: @keyframes type < from < width: 0; >>
   Эффект пошагового появления через steps позволяет сделать эффект наборного текста без помощи JS
   Попробуйте поменять значения параметров и посмотреть, как они влияют на итоговый результат.

   Cмена картинок

   Первым делом добавляем в HTML класс, в котором прописываем адреса нужных картинок: В CSS прописываем параметры анимации: изменения по кадрам keyframes, длительность, количество повторов и эффекты. Пример кода — на ресурсе Zornet. Попробовать разные настройки анимации и посмотреть результат можно здесь. Движение Анимация движения особенная — при движении объект должен изменяться внешне. Например, вытягиваться вверх при прыжке. В этом примере автор добавил прыгающему квадрату вытягивание вверх, замедление в верхней точке прыжка, отскок и небольшое искажение при приземлении.

   Автор прописал ширину и высоту «сцены» в блоке .stage, параметры и анимацию квадрата — в блоке .box, анимацию — в разделах .bounce-7 и @keyframes

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

   При скролле

   1. Выбрать нужную анимацию из готовых пресетов и скачать архив со всеми инструментами для ее настройки.
   2. Добавить animate.css из архива в таблицу стилей сайта.
   3. Задать класс элементу, который нужно анимировать. Название класса = название анимации из первого шага.
   4. Чтобы анимация срабатывала во время скролла, добавляем wow.js из архива в JS-папку сайта.

   Пошагово с подробными примерами процесс описан на ресурсе Smartlanding.

   Вывод

   Основной принцип создания CSS-анимации — создать объект или контейнер в HTML и присвоить ему CSS-стили. Стили описывают внешний вид объекта, запускают анимацию и придают эффекты.

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

   Даже простая анимация объектов или текста придаст вашему сайту эффектности, а красивый прелоадер поможет удержать посетителей, если сайт долго загружается.

   Читайте также:

   Похожие публикации:

   1. Applewebkit 605 что это в телеграмме
   2. Как поменять тему в codeblocks
   3. Как снять плавающее выделение в гимп
   4. Что такое операнд в программировании