Как создать простую анимацию на чистом CSS и не использовать JS

От автора: CSS переходы и трансформации отлично подходят для создания визуального взаимодействия на основе изменений состояния. Чтобы лучше контролировать происходящее на экране, можно воспользоваться свойством CSS анимации для создания простой анимации на @keyframes. У данной техники широкий спектр применения в дизайне, с ее помощью можно создавать умопомрачительные загрузчики, интерактивные интерфейсы, эффекты и полноэкранные истории. В этом уроке вы узнаете, как применять ваши знания о CSS переходах, чтобы быстро освоить анимацию, а также как с помощью @keyframes применять различные стили к элементу в разные промежутки времени. Пример примитивной работы анимации можно наблюдать у меня в логотипе (только десктоп)

@keyframes

CSS keyframes позволяет производить изменения постоянно и автоматически, а не только в ответ на события мыши, как в transition. С помощью кейфреймов можно менять CSS стили для заданного селектора в любой точке в момент смены состояния или события, определенного через JQuery (например, скролинг). Данное правило используется в паре со свойством animation, с помощью которого можно задать duration, timing function, delay и direction. Свойства типа transform, если они входят в анимацию, объявляются внутри правила @keyframes.

Для начала каждое правило @keyframe должно иметь уникальное имя:

	
@keyframes animation-name{ }

Это имя используется в стилях элемента в свойстве animation:

.element { 
 animation: animation-name; 
}

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

 @keyframes animation-name { 
  0% { 
 color: pink; 
  } 
  50% { 
 color: yellow; 
  } 
  100% {
 color: blue;
 }
}

Пример применения этого простого правила к фоновому цвету для изменения body:

body {
  animation: change-background 4s ease infinite;
}

Смотреть ДЕМО