CSS-анимация 🧙‍♂️

CSS-анимация — отличный способ лучше понять волшебную силу CSS. CSS-анимация позволяет нам добавлять магию анимации на любой веб-сайт/веб-приложение без использования javascript. К концу этого блога вы сможете осыпать магией анимации все вокруг.

Хотя этот блог почти не требует предварительных знаний, предпочтение отдается некоторым базовым понятиям CSS. Если вы новичок в Интернете, пожалуйста, не стесняйтесь проверить мою серию веб-разработки → здесь
До сих пор в этой серии я рассмотрел основы веб-технологий: HTML, CSS, основы, а также некоторые продвинутые концепции, в том числе некоторые проекты для лучшего понимания практических приложений.
В этом блоге мы почти подошли к концу раздела CSS в моей серии веб-разработок.

Зачем добавлять анимацию CSS? 🧐

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

Как добавить анимацию CSS? 🤔

Добавить анимацию CSS довольно просто.

Мы можем определить нашу собственную анимацию CSS, используя ключевое слово ``` @keyframes ```.
Ключевое слово @keyframes позволяет нам определять промежуточные изменения в наборе свойств CSS, приводящие к анимации. Таким образом, мы получаем больше контроля над анимацией по сравнению со свойством перехода CSS.

Общий синтаксис:

@keyframes animationname {keyframes-selector {css-styles;}}

Кажется сложным? 😵 Больше не беспокойтесь, давайте лучше разберемся в этом на примере кода.

Используемый синтаксис:

@keyframes animation1 {
  0% {color : black}
  25% {color : white}
  50% {color : purple}
  75% {color : crimson}
  100%{color : black}
}
// animation name : animation1
// css set of properties that we are changing : color
// we can include as many properties we want to, c

// animation in action -> the color will change from:
// black --> white --> purple --> crimson --> black
// there is another way of defining animation :
@keyframes animation2 {
  from{color : black}
  to{color : white}
}
// but as you can see, this method allows less cutom ability
// compared to the previous one,it just has an initial and final point
// whereas,in the previous one, we could choose our own point of trigger.

Ну, теперь это имеет смысл, не так ли? 😉
Мы узнали, как определить нашу анимацию, следующим делом, очевидно, будет то, как использовать заданную анимацию.

Я прикреплю CodePen.IO ближе к концу этого блога, чтобы вы могли играть с ним сколько угодно, чтобы лучше понять анимацию CSS.

Как добавить определенную анимацию к элементам? 🤔

Большая часть работы по созданию и добавлению CSS-анимации заключается в определении анимации, которую мы узнали только в предыдущем контексте, с использованием ключевых кадров.
Добавление определенной CSS-анимации к элементу предельно просто.

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

CSS предлагает множество других свойств, связанных с анимацией, таких как:

• анимация-задержка : задержка эффекта анимации на указанное время.
• анимация-тайминг-функция: добавить эффект к началу анимации.
• animation-iteration-count : количество циклов анимации.

Однако повторение всех свойств делает КОД ВЛАЖНЫМ (написать все дважды). CSS также предлагает сокращение, позволяющее сделать код СУХИМ (не повторяйтесь) 😎
Сокращенное свойство анимации CSS объединяет все свойства анимации в одно свойство.
Давайте разберемся с этим на примере пример нашей определенной анимации.

p{
animation : animation1 10s infinite;
};
// animation : animation-name animation-duratinon animation-iteration-count
// the animation effect is refelected upon the paragraph element in the web document
@keyframes animation1 {
  0% {color : black}
  25% {color : white}
  50% {color : purple}
  75% {color : crimson}
  100%{color : black}
};

Ну вот и все! 😃
Это действительно так просто.
Давайте подведем итоги, чтобы отметить то, что мы узнали в этом блоге.

Подведение итогов. 🍫

• Анимации повышают интерактивность, вовлеченность и удержание.
• Анимации CSS можно определить с помощью ключевых кадров и указания набора свойств CSS, которые мы хотим изменить для анимации.
• Ключевые кадры: это дает нам больше контроля над анимацией, чем свойство перехода CSS.
• После определения анимации все, что нам нужно сделать, это указать имя анимации в области действия элемента, который мы хотим анимировать.
• CSS предлагает сокращенное свойство анимации, которое объединяет все свойства анимации в одно свойство, делая код CSS СУХИМ.

Время игры. 🧸

Учиться во время работы — лучший способ учиться.

https://codepen.io/dtech-dbug/pen/mdmpEOz

Берегите себя, милые. Оставайтесь увлажненными. Продолжай быть крутым! 🤗