Jak tworzyć animacje klatek kluczowych CSS

CSS daje programistom możliwość ożywienia swoich stron internetowych za pomocą animacji klatek kluczowych.

Animacja CSS jest osiągana poprzez zmianę początkowego stanu elementu HTML poprzez jego różne właściwości. Niektóre ogólne właściwości CSS, które można animować, obejmują:

jak scalić arkusze kalkulacyjne w programie Excel?

Szerokość
Wzrost
Pozycja
Kolor
Nieprzezroczystość

Te ogólne właściwości CSS są manipulowane przez określone elementy CSS w celu uzyskania pożądanego rezultatu. Jeśli kiedykolwiek natknąłeś się na animowany element na stronie internetowej, istnieje duże prawdopodobieństwo, że element został animowany za pomocą animacji klatek kluczowych.

Co to jest element klatek kluczowych?

ten element klatek kluczowych może być użyty w jednym lub kilku elementach HTML, do których ma dostęp. Identyfikuje określony punkt w stanie elementu i dyktuje wygląd, jaki ten element musi mieć w tym czasie.

To może wydawać się trudne do strawienia, ale w rzeczywistości jest całkiem proste. ten element klatek kluczowych ma dość prostą strukturę, którą można łatwo zrozumieć i dostosować do wszelkich wymagań dotyczących animacji.

Przykład struktury klatek kluczowych

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

Załóżmy, że chcesz animować zielony prostokątny przycisk, zmieniając go w niebieski okrągły przycisk.

W ramach parametrów z powyżej musisz umieścić wszystkie niezbędne stylizacje, aby element wyglądał jak zielony prostokątny przycisk, a następnie w do sekcji, umieścisz wszystkie wymagania dotyczące stylizacji, aby przekształcić ten przycisk w niebieski okrągły przycisk.

Jeśli myślisz, nie brzmi to zbytnio jak animacja. Cóż, to dlatego, że kluczowy składnik tego całego procesu nie został jeszcze wprowadzony — ten składnik to właściwość animacji.

Właściwość animacji

ten właściwość animacji ma zestaw różnych właściwości podrzędnych; są one używane w połączeniu z powyższą strukturą klatek kluczowych, aby animować żądany element HTML.

Jednak wystarczy znać tylko pięć z tych podwłaściwości i wartości, które są z nimi powiązane, aby uzyskać animację w swoich projektach. Te właściwości są znane jako:

Nazwa animacji
Czas trwania animacji
Funkcja synchronizacji czasu animacji
Opóźnienie animacji
Liczba iteracji animacji

Korzystanie z animacji na stronie internetowej

Korzystając z powyższego scenariusza, celem jest stworzenie animowanego przycisku.

Przykład animacji przycisków

  
  
  
  
  
  
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!

Sekcja animacji powyższego kodu zawiera pięć podwłaściwości, o których wspomniano wcześniej. Każda właściwość ma bardzo odrębną funkcję i razem działają, aby animować dowolny element HTML, do którego są przeznaczone.

Powiązane: Jak kierować do części strony internetowej za pomocą selektorów CSS

Właściwość nazwy animacji

Ta właściwość jest najważniejszą pojedynczą właściwością na liście. Bez właściwość nazwa-animacji , nie miałbyś identyfikatora, który mógłbyś przekazać do element klatek kluczowych , czyniąc cały kod w jego parametrach bezużytecznym.

Jeśli zapomniałeś uwzględnić jedną lub dwie inne właściwości podrzędne, nadal możesz mieć całkiem przyzwoitą animację. Jeśli jednak zapomniałeś właściwość nazwa-animacji nie miałbyś animacji.

Właściwość czasu trwania animacji

Ta właściwość służy do definiowania czasu, jaki powinien zająć animowany element podczas przechodzenia z jednego stanu do następnego.

W powyższym przykładzie właściwość czasu trwania animacji jest ustawiony na 5 sekund (5s), więc zielony prostokątny przycisk będzie miał w sumie 5 sekund, zanim całkowicie zmieni się w niebieski okrągły przycisk.

Właściwość Animation-delay

Ta właściwość jest ważna z jednego powodu; niektóre strony internetowe mogą załadować się całkowicie po kilku sekundach (z powodu kilku różnych czynników). Więc właściwość opóźnienia animacji zapobiega natychmiastowemu uruchomieniu animacji na wypadek, gdyby ładowanie strony internetowej trwało trochę czasu.

W powyższym przykładzie właściwość opóźnienia animacji jest ustawiona na 4s, co oznacza, że animacja rozpocznie się dopiero po 4 sekundach od odwiedzin strony (co daje stronie wystarczająco dużo czasu na załadowanie przed rozpoczęciem animacji).

Właściwość Animation-iteration-count

Ta właściwość określa, ile razy animowany element powinien przechodzić z jednego stanu do następnego. ten właściwość animation-iteration-count przyjmuje wartości, które są słowami i liczbami. Wartość liczbowa może wynosić od 1 wzwyż, podczas gdy wartość słowa to zwykle nieskończony .

W powyższym przykładzie wartość licznika animacji-iteracji jest ustawione na nieskończony , co oznacza, że tak długo, jak strona internetowa jest aktywna, właściwość przycisku będzie stale animowana z jednego stanu do drugiego.

Właściwość funkcji synchronizacji czasu animacji

Ta właściwość dyktuje ruch animowanego elementu, gdy przechodzi on z jednego stanu do następnego. ten właściwość funkcji animacji-timing zwykle przypisuje się jedną z trzech wartości łatwości.

Łatwość w
Wyluzuj
Łatwość wyprowadzania

ten łatwość-w-out wartość jest używany powyżej; to powoli przenosi animację z jednego stanu do drugiego. Jeśli celem jest powolne przejście, gdy przycisk zmienia się z zielonego prostokąta w niebieskie kółko, użyjesz łatwość w wartości . Jeśli chcesz tylko powolnego przejścia w przeciwnym kierunku, użyjesz wartość luzu .

Redukcja naszego kodu

W większości przypadków skrócenie czasu trwania programu jest postrzegane jako podejście praktyczne. Dzieje się tak głównie dlatego, że mniej linii kodu zmniejsza prawdopodobieństwo niezauważenia błędów w programach.

Powyższy kod można skrócić o cztery wiersze. Można to osiągnąć po prostu używając właściwości animacji bez wyraźnego identyfikowania każdej z jej właściwości podrzędnych.

Redukcja kodu dla przykładu animacji przycisku

  
  
  
  
  
  
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;  
}  
}  
  
  
  

				
				
				Kategoria				 Programowanie