Как да създадете CSS анимации с ключови кадри

Как да създадете CSS анимации с ключови кадри

CSS дава възможност на разработчиците да оживят своите уеб страници, използвайки анимация на ключови кадри.





CSS анимацията се постига чрез промяна на първоначалното състояние на HTML елемент чрез неговите различни свойства. Някои общи свойства на CSS, които могат да бъдат анимирани, включват:



как да отмените плащане от venmo
  • Ширина
  • Височина
  • Позиция
  • Цвят
  • Непрозрачност

Тези общи CSS свойства се манипулират от специфични CSS елементи, за да се създаде желаният резултат. Ако някога сте попадали на анимиран елемент на уеб страница, има вероятност елементът да е анимиран с помощта на анимация на ключови кадри.





Какво е елемент от ключови кадри?

The елемент от ключови кадри може да се използва върху един или повече HTML елементи, до които има достъп. Той идентифицира конкретна точка в състоянието на елемент и диктува външния вид, който този елемент трябва да има по това време.

Това може да звучи като много за смилане, но всъщност е съвсем просто. The елемент от ключови кадри има доста проста структура, която лесно може да бъде разбрана и коригирана, за да отговаря на всички изисквания за анимация.



Пример за структура на ключови кадри


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Да предположим, че искате да анимирате зелен правоъгълен бутон, като го превърнете в син кръгъл бутон.

В рамките на параметрите на от в горния раздел ще трябва да поставите всички необходими стилове, за да изглежда елементът като зелен правоъгълен бутон, след това в да се раздел, ще поставите всички изисквания за оформяне, за да трансформирате този бутон в син кръгъл бутон.



Ако мислите, това не звучи твърде много като анимация. Е, това е така, защото ключов компонент на целия този процес тепърва ще бъде въведен --- този компонент е анимационното свойство.

Свойството на анимацията

The свойство анимация има набор от различни под-свойства; те се използват в комбинация със структурата на ключовите кадри по -горе за анимиране на желания HTML елемент.



Трябва обаче да знаете само пет от тези под-свойства и стойностите, които са свързани с тях, за да постигнете анимация във вашите проекти. Тези свойства са известни като:

  • Име на анимация
  • Анимация-продължителност
  • Функция за анимация-време
  • Анимация-забавяне
  • Анимация-итерация-брой

Използване на анимация на уеб страница

Използвайки горния сценарий, целта е да се създаде анимиран бутон.

Пример за анимация с бутони







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


Разделът за анимация на горния код съдържа петте подсвойства, споменати по-рано. Всяко свойство има много различна функция и заедно работят за анимиране на всеки HTML елемент, към който са насочени.

Свързани: Как да насочвате към част от уеб страница с помощта на CSS селектори

Свойството име на анимация

Това свойство е единственото най -важно свойство в списъка. Без свойство анимация-име , няма да имате идентификатор за преминаване към елемент от ключови кадри , което прави целия код в неговите параметри безполезен.

Ако сте забравили да включите едно или две от другите под-свойства, тогава все още може да имате доста прилична анимация. Ако обаче сте забравили свойство анимация-име няма да имаш анимация.

Свойството за продължителност на анимацията

Това свойство се използва за определяне на времето, което анимираният елемент трябва да отнеме при преминаване от едно състояние в друго.

В горния пример, анимация-продължителност свойство е зададен на 5 секунди (5s), така че зеленият правоъгълен бутон ще има общо 5 секунди, преди да стане напълно син кръгъл бутон.

Свойството Animation-delay

Това свойство е важно поради една причина; някои уеб страници може да отнеме няколко секунди, за да се заредят напълно (поради няколко различни фактора). Така че анимация-забавяне свойство предотвратява незабавното стартиране на анимацията само в случай, че уеб страницата отнема известно време за зареждане.

В горния пример, анимация-забавяне свойство е зададено на 4s, което означава, че анимацията ще започне чак 4 секунди след посещението на уеб страницата (давайки на уеб страницата достатъчно време да се зареди, преди анимацията да започне).

Свойството за броене на анимация-итерация

Това свойство посочва колко пъти анимираният елемент трябва да премине от едно състояние в друго. The animation-iteration-count свойство приема стойности, които са думи и числа. Стойността на числото може да бъде всичко от 1 нагоре, докато стойността на думата обикновено е безкраен .

В горния пример, стойност на анимация-итерация-брой е настроено на безкраен , което означава, че докато уеб страницата е горе, свойството на бутона ще се анимира непрекъснато от едно състояние в друго.

Свойството на функцията за анимация-време

Това свойство диктува движението на анимирания елемент при преминаването му от едно състояние в друго. The анимация-време-функция функция обикновено се присвоява една от трите стойности на лекота.

  • Улесняване
  • Облекчаване
  • Улеснение навън

The лесна за излизане стойност се използва по -горе; това бавно преминава анимацията от едно състояние в друго. Ако целта е да се създаде бавен преход, когато бутонът се трансформира от зелен правоъгълник в син кръг, бихте използвали непринудена стойност . Ако искате само бавния преход в обратна посока, бихте използвали облекчаваща стойност .

Намаляване на нашия кодекс

В повечето случаи намаляването на продължителността на програмата се разглежда като практически подход. Това се дължи главно на това, че по -малкото редове код намаляват вероятността грешките да останат незабелязани във вашите програми.

Горният код може да бъде намален с четири реда. Това може да се постигне чрез просто използване на анимационното свойство без изрично идентифициране на всяко от неговите подсвойства.

Намаляване на кода за примера за анимация с бутони







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}