EN
Оставить заявку

Анимация средствами CSS

Анимация средствами CSS

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

CSS анимация состоит из двух компонентов: дескрипторы css и самим набором keysframe-ов, последние определяют старт  анимации и сами стили которые буду изменятся , а также возможные промежуточные точки анимации.

Есть три причины использовать СSS анимацию в замен традиционным JavaScript

  •  CSS анимацию просто реализовать для простеньких эффектов, даже не зная  JavaScript.
  • Анимация работает быстро даже при умеренной нагрузке системы в то время, как несколько анимаций реализованных с помощью скриптов могут значительно повысить нагрузку на ваш сайт.А все это благодаря тому, что при рендеренге СSS анимации учитываются  border, padding и другие свойства это позволяет сохранить производительность.
  • Средствами браузера определяется производительность и просчитывается эффективность, например,  уменьшается   плавность анимации и частота кадров анимации в неактивных вкладках браузера.

Настройка CSS анимации

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

Свойства animation являются:

  • animation-delay — задержка между загрузкой анимации и её выполнением
  • animation-direction -определяет направление рендеринга анимации
  • animation-duration — определяет интервал времени который нужен для завершения анимации
  • animation-iteration-count — отвечает за количество итераций анимации
  • animation-name — имя анимации, по которому вызывается нужная анимация
  • animation-play-state — позволяет возобновлять и останавливать анимацию
  • animation-timing-function — определяет способ расчета промежуточных значений анимации
  • animation-fill-mode- отвечает за то будет ли виден эффект от анимации после её завершения

Ну и вот вам маленький примерчик(Написан чисто под -webkit и последние браузеры)

P.S. поддержка браузерами 
/* Safari 4+ */
/* Fx 5+ */
/* Opera 12+ */ 
/* IE 10+ */

Если писать правильно, но это совсем другая история;-)

 

Анимация средствами CSS 4.73/5 1101
Контакты
Украина
0 800 330 690
бесплатно по Украине с любого номера
Киев, ул. Вадима Гетьмана, 1Б
Харьков, ул. Отакара Яроша, 18
Нью-Йорк
Москва
 
ОБСУДИТЬ ПРОЕКТ
Крутые проекты начинаются с заполнения этой формы
Success
Заявка успешно отправлена
Спасибо, что обратились в Art Lemon.
Обращения обрабатываются с 10:00 до 18:00 по будням. Заявки, полученные в выходные, обрабатываются в первой половине следующего рабочего дня.
Переверните устройство