Анимация CSS для начинающих

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

Это что касается пользовательских показателей.

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

Должен предупредить — прежде чем браться за анимацию элементов, нужно познакомиться с основами HTML и CSS

Основные компоненты CSS анимации — свойства transition и animation, и правило @keyframes.

Рассмотрим их по порядку.

transition

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

transition в свою очередь можно разделить на 4 составляющие, каждая из которых влияет на определённый аспект эффекта перехода.

1. transition-property — определяет свойство, которое будет анимироваться. Например если элемент будет сдвигаться, то это будут свойства top, left, margin и т. п., менять размер, то width или height, менять цвет — color или background.

Записывается так:

transition-property: left;

2. transition-duration — продолжительность эффекта перехода. Задаётся в секундах.

transition-duration: 3s;

3. transition-timing-function — скорость эффекта перехода. Принимает следующие значения:

ease — анимация медленно начинается, затем ускоряется и к концу опять замедляется;

ease-in — медленно начинается, а к концу ускоряется;

ease-out — быстро начинается, а к концу замедляется;

ease-in-out — замедление в начале и в конце;

linear — постоянная скорость;

cubic-bezier — задаёт все значения в числовом выражении. Например значение ease записывается так: cubic-bezier(0.25,0.1,0.25,1).

4. transition-delay — задержка начала анимации. Задается в секундах. Например анимация может начаться через определённое время после загрузки страницы.

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

transition: left 3s ease(или cubic-bezier(0.25,0.1,0.25,1) 3s;

Пример в котором элемент будет перемещаться при наведении на него курсора.

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>transition</title>
<style>
div {
  position: absolute;
  top:50px; 
  left:100px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #FF3D00;
  transition: left 2s linear 0.2s;
}
div:hover {
 left: 200px;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

Результат:

 

animation и @keyframes

Свойство animation и правило @keyframes применяются для создания анимации любой сложности.

Свойство animation задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке @keyframes задаётся сама анимация по шагам (изменения вида и положения)

Свойство animation включает в себя восемь составляющих:

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

2. animation-duration — длительность анимации, задаётся в секундах (s) или миллисекундах (ms).

3. animation-timing-function — определяет тип анимации и принимает следующие значения:

ease — скольжение;

linear — ровное движение;

ease-out — ускорение в начале;

ease-in — ускорение в конце;

ease-in-out — более плавное скольжение, чем ease

cubic-bezier — задаёт числовые параметры позволяющие реализовать более сложные типы анимации. Инструмент для подбора числовых параметров — cubic-bezier.com

step-start и step-end — задаёт пошаговую анимацию (счётчик)

steps — задаёт количество шагов за которые будет выполнена анимация (секундомер — steps(60) animation-duration -60s)

4. animation-iteration-count — задаёт число повторений анимации. Принимает значения:

любое число — сколько раз повторяется анимация;

infinite — бесконечное повторение;

5. Animation-direction — задаёт направление движения. Принимает значения:

normal — движение слева на право;

reverse — движение справа на лево;

alternate — полный цикл туда и обратно;

alternate-reverse — полный цикл, но начинается и заканчивается с конца;

6. animation-play-state — задаёт остановку анимации. Принимает значения:

running — анимация проходит нормально (по умолчанию);

paused — анимация замирает на первом шаге;

7. animation-delay — задаёт задержку анимации перед началом воспроизведения. Определяется в секундах (s) и миллисекундах (ms)

8. animation-fill-mode — позволяет проигрывать анимацию вне указанного времени воспроизведения. Принимает значения:

none — анимация в работает только в заданном времени воспроизведения, потом возвращается на место.

forwards — анимация продолжается после окончания времени воспроизведения;

backwards — анимация начинается до начала воспроизведения;

both — анимация работает и до начала и после окончания времени воспроизведения;

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

Все свойства можно записать в сокращённом виде, указав в свойстве animation только их значения. Например:

animation: nev 5s infinite alternate;

Правило @keyframes — второй шаг в создании сложной анимации.

Внутри этого правила создается поэтапное воспроизведение преобразований происходящих с элементом.

На практике это выглядит следующим образом: в таблице стилей создаётся селектор @keyframes внутрь которого помещаются селекторы последовательно определяющие состояние элемента.

Например, возьмём элемент <div></div>, зададим ему форму квадрата, фоновый цвет, и сделаем чтобы этот цвет менялся от полной прозрачности, к полной непрозрачности.

HTML

<div></div>

CSS

div {
  width: 200px;
  height: 200px;
  background-color: #FF3D00;
  animation: nev 5s infinite alternate;

 @keyframes nev {
  from {		/* От */
    opacity: 0;		/* полная прозрачность */
  }
  to {			/* До */ 
    opacity: 1;		/* полная непрозрачность */
  }
}

Селекторами from и to задаётся преобразование от одного состояния элемента до другого.

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

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

@keyframes nev {
  0%  {
    opacity: 0;
	border-radius: 50%;
  }
 
  50%  {
    opacity: 0.5;
	border-radius: 30%;
  }

  100% {
    opacity: 1;
	border-radius: 0;
  }
}

Пример появления и исчезновения квадрата:

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>animation</title>
<style>
div {
  width: 200px;
  height: 200px;
  background-color: #FF3D00;
  animation: nev 5s infinite alternate;
}
 @keyframes nev {
  0%  {
    opacity: 0;
	border-radius: 50%;
  }

  20%  {
    opacity: 0.2;
	border-radius: 40%;
  }
 
  50%  {
    opacity: 0.5;
	border-radius: 30%;
  }

  100% {
    opacity: 1;
	border-radius: 0;
  }
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

Результат:

 

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

В следующей статье «CSS перемещение, вращение, 3D» подробно разберём свойство transform, без которого не обходится почти ни одна анимация.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

2 комментария на «Анимация CSS для начинающих»

  1. stariс говорит:

    Привет. Вот тут все направления https://starper55plys.ru/css/css-peremeshhenie-vrashhenie-3d/

  2. Борис говорит:

    Привет! А как задавать направление шара? Например, не вправо чтоб он двигался, а вниз.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *