keyframes

keyframe (ключевые кадры) представляет собой набор правил, которые будут применяться в течение анимации.

Прыгающий мячик

Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.


#ball {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: #f00;
	position: absolute;
	bottom: 0;
}

Создадим ключевые кадры:


@keyframes bounce {
	0%	{ bottom: 0; }
	50%	{ bottom: 100px; }
	100%	{ bottom: 0; }
}

Сначала мы задаём имя анимации — «bounce». Затем мы описываем ключевые кадры анимации:

  • 0% { bottom: 0; } — в начале мячик находится на исходной позиции;
  • 50% { bottom: 100px; } — в середине анимации мячик достигает максимальной высоты;
  • 100% { bottom: 0; } — к концу анимации мячик падает на исходное место.

Создаём анимацию:


#ball:hover {
	animation: bounce 1s infinite ease;
}

Пульсация элемента формы

Комбинация box-shadow и keyframes даёт замечательный эффект подсветки формы, когда элемент оказывается в фокусе. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.

Код пульсирующей формы:


@keyframes pulse {
	0% {
	  box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
	}
	50% {
	  box-shadow: 0 0 20px rgba(200, 50, 50, 0.9);
	}
	100% {
	  box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
	}
}

form input[type="text"]:focus {
	animation: pulse 1.5s infinite ease-in-out;
}

Меняем фон

Если необходимо изменить цвет фона с одного цвета на другой с помощью keyframe-анимации при наведении на элемент курсора мыши за 5 секунд, то указываем два цвета, а дальше встроенный алгоритм анимации самостоятельно разобьёт весь процесс на отдельные шаги по времени и выполнит плавный переход.


#colorblock {
  background: red;
  animation: color-me-in 5s; /* можно добавить "infinite alternate" */
}

@keyframes color-me-in {
  /* первый шаг */
  0% {	
    background: orange;
  }
  /* второй шаг */
  100% {
    background: blue;
  }
}

В примере мы указали название для анимации color-me-in и определили два состояния. В свойстве animation указываем созданную анимацию и время выполнения - 5 секунд. Можно заменить на бесконечную анимацию. После окончания анимации фон станет красным из-за стиля background, если не используется бесконечная анимация.

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


body {
  background: red;
  animation: color-me-in 5s; /* можно добавить infinite alternate */
}

@keyframes color-me-in {
  /* первый шаг */
  0% {	
    background: orange;
  }
  /* второй шаг */
  50% {
    background: magenta;
  }
  /* третий шаг */
  100% {
    background: blue;
  }
}

Анимация с задержкой между итерациями

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

Свойство animation-delay не поможет. Свойство задерживает первый старт анимации, после чего она выполняется непрерывно.

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


.mover {
    animation: move 5s infinite;
}

Теперь наша @keyframes-анимация будет длиться 5 секунд:


@keyframes move {
    /* что-то произойдет за эти 5 секунд */
}

Чтобы анимация длилась 1 секунду, нужно вносить изменения каждую 1/5 времени или 20%.


@keyframes move {
  0% {
    transform: translate(0, 0);
  }
 
  /* Закончите все действия к этому моменту */
  20% {
    transform: translate(200px, 0);
  }
 
  /* Между 20% и 100% ничего не происходит */
  100% {
    transform: translate(200px, 0);
  }
}

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


@keyframes move {
  20%, 100% {
    transform: translate(200px, 0);
  }
}

Демо

See the Pen Keyframe with Animation Delay Between Iterations by Chris Coyier (@chriscoyier) on CodePen.

Дополнительное чтение

CSS: keyframes + SVG = love

Реклама