Анимация – это видимое передвижение объекта происходящее за определенный промежуток времени.

Создание базовой анимации

Каждый управляемый веб-объект подчиняется анимации. Предположим нам нужно анимировать текстовый абзац на сайте: что нам понадобится? Указать деятельность нашей анимации, которая действует в промежутке от 0% до 100%.

1

Создаем абзац <p> Hellow </p>

Сначала в CSS задается @keyframes и рандомное имя – в моем случае zavlekyxa. После указывается деятельность анимации:

@keyframes zavlekyxa {
0% { left: 0; top: 0;}
50% { left: 240px; top: 140px;}
100% { left: 0; top: 0; }
}

Ходит CSS анимация

  • 0% – это начало анимации, ничего не происходит.

  • 50% – это середина анимации, за это время текст сместился на 240 пикселей правее и на 140 ниже.

  • 100% текст вернулся на исходную позицию когда анимация подошла к концу.

2

Недостаточно указать деятельность анимации, ведь её нужно кому-то присудить – абзацу, картинке или иному объекту на сайте.

Мы делаем анимацию для текста обернутого в абзац <p> </p> Соответственно присуждаем анимацию абзацу:

p { animation: zavlekyxa 4s linear 0s infinite; }

  • p – это абзацы сайта, все они будут они будут анимированными. Если нам нужны анимационные картинки, то мы вместо “p” используем img.
  • animation – анимация
  • zavlekyxa – название вышеуказанного keyframe. Название связывает keframe с тем или иным объектом, в нашем случае абзацем.
  • 4s – длительность анимации
  • linear – скорость анимации. Существуют разные скорости анимации, ну об этом чуть ниже.
  • 0s – начало анимации. Если укажет 20 секунд, то только через 20 секунд начнет действовать анимация.
  • infinite – периодичность анимации. В нашем случае анимация действует бесконечно, хотя можно указать число! Допустим 1 раз анимация сработает и остановится.

Вот более понятный результат:

Анимация в WordPress

 

Скорость анимации

Давайте разберем все animation-timing-function:

  • ease — скольжение (работает изначально)
  • linear — стабильное движение
  • ease-in — финишное ускорение
  • ease-out — стартовое ускорение
  • ease-in-out — плавное скольжение

Скорость анимации

 

Анимированные рамки для картинок

Возникает вопрос – а где применить анимацию на WordPress сайте? Начнем с изображений! Обернем все картинки сайта в анимированные рамки:

Анимационные рамки

 

Облагораживание цитат

Обработанные цитаты встречаются буквально на любом сайте, но что если их наделить процессуальной сменой цвета? В WordPress все цитаты именуются как blockquote, я сейчас говорю про CSS наименования всех цитат.

blockquote css animation black


 

Анимационный раздражитель

На некоторых страницах можно разместить кнопки с призывом к действию. Анимированные кнопки подойдут как для коммерческого интернет-магазина (купить), так и для информационного сайта (оставить комментарий).

Клики кнопки

 

Мерцающий заголовок

Заголовки могут переливаться в экстазе! Добавляйте text-shadow с одинаковым параметрами и разными цветами.

Заголовок анимированный CSS

 

Вот и всё на сегодня! Познали так сказать базовую анимацию! До новых встреч дамы и господа, увидимся на следующих уроках  🙂