CSS анимация для разработки сайтов

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

Анимации с ключевыми кадрами с помощью CSS сохраняют многие строки Javascript, даже если они имеют более узкие пределы, чем анимации с Javascript. Простые CSS-анимации также работают быстро и без Javascript.

CSS анимация для разработки сайтов сейчас исключительно актуальна. Время анимированных GIF-изображений истекает, PNG всегда отказывалась делать анимации. Флэш умер с появлением HTM5 и CSS3.

• Анимированный GIF не может быть написан по сценарию, не допускает эффектов и является чем угодно, но не компактным.

• Анимации Javascript с помощью requestAnimationFrame компактны, эффективны и взаимодействуют с пользователем.

• SVG имеет свою собственную модель анимации, которая не поддерживается IE и Edge и задвинута в дальний угол разработчиками Blink (Chrome) .

• Анимации с помощью HTML canvas и Javascript являются мощными и совсем не интуитивными.

Анимации с помощью CSS и Javascript — с или без jQuery — эффективны и веб-нативны. Практически все, что можно стилизовать, также можно анимировать.