Анимация средствами CSS: преимущества, способы, настройки

Что такое css и почему она становится все популярной в анимировании? Чтобы ответить на этот вопрос, необходимо понять, как она работает и чем отличается от привычного всем JavaScript.

CSS-animation делает сайт динамичным, более привлекательным и понятным для пользователя. Движущиеся, дрожащие, вращающиеся объекты призывают к активным действиям, делают страницу «живой» и привлекательной. Сегодня ее используют в самых разных проявлениях, поэтому эффекты, полученные посредством CSS анимации, могут показаться слишком сложными. Однако, после детального рассмотрения кода, становится понятно, что исполнить их достаточно просто.

Появление CSS3 стало настоящей находкой для верстальщиков, ведь теперь не нужно заниматься сложными процессами в JavaScript — многие трудные задачи стали более простыми и понятными.

Преимущества использования СSS вместо JavaScript

Получив достаточно опыта в использовании CSS-animation, большинство web-разработчиков отмечают следующие ее достоинства:

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

  • Кроме того, освоив такой метод кодирования, можно узнать, как затемнить картинку css или как изменить шрифт в css, не потратив много времени и сил

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

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



    Как подключить css к html

    Остается главный вопрос: как привязать css к html. Для этого имеется несколько вариантов: с помощью внешних, внутренних и встроенных таблиц стилей:

  • чтобы узнать, как подключить css-файл к документу html через внешние таблицы, необходимо использовать файл с окончанием .css и  интегрированного в HTML;
  • как подключить css к html через внутренние таблицы — использовать для этого атрибута style;
  • встроенные таблицы следует прописать в заголовке HTML-документа, тогда точно будете знать, как подключить css.


  • Разобравшись детально с тем, что такое css, веб-разработка станет приятной и последовательной работой, а такие действия, как изменить цвет текста в css или как растянуть картинку в css, не вызовут трудностей.