Język HTML zapewnia strukturę strony internetowej, a CSS zapewnia projekt i formatowanie tej aplikacji. Ta kombinacja pozwala również na dodanie animacji, ponieważ animowane elementy wyglądają atrakcyjniej niż elementy statyczne. Pozwala również elementowi stopniowo zmieniać swój styl.
W tym artykule dowiesz się, jak zastosować animację do elementów. Więc zaczynajmy!
Co to są klatki kluczowe animacji CSS?
Aby animacja została wykonana, musimy powiązać animację z elementem HTML. W tym celu użyj słowa kluczowego „ @klatki kluczowe ”, po którym następuje nazwa animacji. Ten komponent określa początek i koniec animacji.
Jak skonfigurować klatki kluczowe animacji CSS?
Aby skonfigurować klatki kluczowe animacji w CSS, omówimy dwa przykłady.
Przykład 1
Aby skonfigurować klatki kluczowe animacji w CSS, wykonaj następujące czynności:
-
- Dodaj element o nazwie klasy „ dział główny ”.
- Wewnątrz elementu div dodaj kolejny element div o nazwie klasy „ img peng ”.
- Wewnątrz tego img-peng div dodaj
, aby umieścić obraz. Ten tag ma trzy atrybuty, „ źródło ”, aby podać ścieżkę do obrazu, „ wszystko ” to alternatywny tekst, który jest dodawany, jeśli obraz nie jest wyświetlany, a „ szerokość ”, aby podać szerokość obrazu.
HTML
< dz klasa = „główny dział” >
< dz klasa = „img peng” >
< img źródło = 'images/pingwin.png' wszystko = 'pingwin' szerokość = „100” >
dz >
dz >
.główny dział {
CSS
szerokość: 90 % ;
wysokość: 90px;
kolor tła: rgb ( 67 , 66 , 87 ) ;
margines: automatyczny 20px;
wypełnienie: 10px;
}
W CSS „ .główny dział ” jest dodawane, aby uzyskać dostęp do klasy div. Zastosowane właściwości są wyjaśnione poniżej:-
- “ szerokość ” wartość właściwości określa szerokość elementu div.
- “ wzrost ” służy do ustawiania wysokości elementu div.
- “ kolor tła ” stosuje kolor do tła elementu.
- “ margines ” jest ustawione jako „ samochód 20px ”, co oznacza odstęp od góry i od dołu, a auto oznacza równy odstęp od lewej i prawej strony.
- “ wyściółka ” wartość właściwości jest przypisana jako 10px, co oznacza przestrzeń wokół zawartości elementu.
Styl img-peng klasa
.img-peng {
szerokość: 50 pikseli;
wysokość: 100px;
pozycja: względna;
animacja: potrząśnij;
czas trwania animacji: 2s;
funkcja synchronizacji animacji: 2s;
liczba iteracji animacji: nieskończona;
}
„ .img-peng ” służy do uzyskiwania dostępu do klasy div, o której mowa w powyższym pliku HTML. Ten element div jest stylizowany na właściwości omówione poniżej:-
- “ szerokość ” służy do ustawienia szerokości elementu.
- “ wzrost ” służy do ustawienia wysokości elementu.
- “ pozycja ” właściwości jest przypisana wartość “ względny ”, co oznacza, że zostanie ustawiony względem swojej normalnej pozycji.
- “ animacja ” nazwa jest podawana jako „ potrząsnąć ”. Można jednak nazwać animację zgodnie z wymaganiami.
- “ czas trwania animacji ” reprezentuje czas trwania animacji, który wynosi 2 sekundy.
- “ funkcja synchronizacji animacji ” ma przypisaną wartość 2s, co oznacza, że po 2 sekundach animacja zostanie zakończona.
- “ liczba iteracji animacji ” jest ustawiony jako nieskończony, co oznacza, że ta animacja będzie przebiegać w nieskończonym czasie.
Zdefiniuj @keyframes za pomocą słów kluczowych do iz
@ klatki kluczowe się trzęsą {
z {
góra: 50 pikseli;
}
do {
margines dolny: 200px;
}
}
Opis klatek kluczowych animacji ustawionych dla obrazu znajduje się poniżej:-
- “ @klatki kluczowe się trzęsą ” odnosi się do nazwy animacji shake, po której następuje słowo kluczowe @keyframes. W ramach tej reguły określone jest zachowanie animacji.
- Wewnątrz nawiasów klamrowych „ z ' oraz ' do ” słowa kluczowe określają różne interwały, aby zdefiniować zachowanie animacji.
- „ Top ” ma przypisaną wartość 50px, co oznacza, że animacja zaczyna się od 50px od góry ekranu i trwa do 200px na dole.
W rezultacie zobaczysz następujące dane wyjściowe:
Teraz niech animacja zachowuje się inaczej w różnych odstępach czasu. Aby to zrobić, użyj wartości procentowych animacji w @keyframes.Określ @klatki kluczowe z wartościami procentowymi
@ klatki kluczowe się trzęsą {
0 % {
lewy: -50px ;
}
25 % {
lewy: 50px;
}
pięćdziesiąt % {
lewy: -25px ;
}
75 % {
lewy: 25px;
}
100 % {
lewy: 10px;
}
}
Tak więc opis powyższego fragmentu kodu jest wymieniony tutaj:-
- Wartości procentowe 0%, 25%, 50%, 75% i 100% reprezentują animację w różnych odstępach czasu.
- Ponadto przy 0% miejsce po lewej stronie obrazu będzie miało postać „ -50px ”. Przy 25% spacja po lewej stronie będzie miała postać „ 50px ”. Przy 50% odstęp po lewej stronie będzie miał postać „ -25px ”. Przy 75% lewa przestrzeń będzie miała postać „ 25px ”, a kiedy animacja zakończy się (100%), lewym miejscem będzie „ 10 piks ”.
Powyższy kod wyświetla następującą animację:
Weźmy inny przykład, aby zobaczyć, jak możemy ustawić animacje do obrazów.Przykład 2
W HTML dodaj element
o nazwie klasy „ Strona główna ”. Wewnątrz tego elementuumieść jeszcze dwa znaczniki div z klasami „ chmura1 ' oraz ' chmura2 ”, odpowiednio.HTML
< dz klasa = 'Strona główna' >
< dz klasa = „chmura1” > dz >
< dz klasa = „chmura2” > dz >
dz >
ciało {
CSS
margines: 0 ;
wyściółka: 0 ;
}
W CSS przypiszemy elementowi body następujące właściwości CSS:-
- “ margines ” jako 0 określa brak odstępu wokół elementu.
- “ wyściółka ” o wartości 0 określa brak spacji wokół zawartości elementu.
Styl strony głównej div
.Strona główna {
obraz tła: url ( / obrazy / wilk-noc.png ) ;
powtórzenie w tle: brak powtórzeń;
rozmiar tła: okładka;
wysokość: 100vh;
pozycja: względna;
przelew: ukryty;
}
Tutaj:-
- “ .Strona główna ” służy do uzyskiwania dostępu do klasy div.
- “ zdjęcie w tle ” właściwości jest przypisana wartość “ url(/images/wolf-night.png) ”, gdzie images to folder zawierający obraz wolf-night.png.
- “ powtarzanie tła ” właściwości jest przypisana wartość “ bez powtórzeń , co oznacza, że obraz zostanie wyświetlony raz.
- “ rozmiar tła ” jest ustawione jako „ pokrywa ”, aby wypełnić cały element div.
- “ wzrost ” wynosi 100vh, co stanowi 100% wysokości rzutni.
- “ pozycja ” jako względny ustawia pozycję obrazu względem jego bieżącej lokalizacji.
- “ przelewowy ” wartość właściwości jest ustawiona jako ukryta, aby ukryć część obrazu, która jest zbyt duża, aby zmieścić się w kontenerze.
Klasa stylu cloud1
.chmura1 {
obraz tła: url ( / obrazy / chmura.png ) ;
rozmiar tła: zawierać;
powtórzenie w tle: brak powtórzeń;
pozycja: absolutna;
góra: 100 pikseli;
szerokość: 500 pikseli;
wysokość: 300 pikseli;
animacja: cloudanimation1;
animacja-czas trwania: 70s;
liczba iteracji animacji: nieskończona;
}
Klasa div cloud1 jest stosowana z następującymi wyjaśnionymi właściwościami:-
- “ .chmura1 ” służy do uzyskiwania dostępu do chmury klasy div1.
- “ zdjęcie w tle ” jest ustawiona jako url(/images/cloud.png), gdzie images to folder zawierający obraz cloud.png.
- “ rozmiar tła ” o wartości „ zawierać ” zapewnia widoczność obrazu.
- “ powtarzanie tła ” właściwość z wartością ustawioną jako „ bez powtórzeń ” wyświetla obraz jako niepowtarzalny.
- “ pozycja ” jako bezwzględne pozycjonuje obraz względem elementu nadrzędnego.
- “ Top ” ustawia obraz na 100px od góry.
- “ szerokość ” służy do ustawienia szerokości elementu div na 500px.
- “ wzrost ” służy do ustawienia wysokości elementu div na 300px.
- “ animacja ” otrzymuje nazwę cloudanimation1.
- “ czas trwania animacji ” reprezentuje czas trwania animacji, który wynosi 70 sekund.
- “ liczba iteracji animacji ” ma przypisaną wartość nieskończoną, która będzie powtarzać animację nieskończoną liczbę razy.
Do tej pory zastosowaliśmy właściwości CSS do strony głównej klasy div i cloud1. Teraz, w następnej sekcji, nadamy styl następnej klasie div o nazwie cloud2.
Klasa stylu cloud2
.chmura2 {
obraz tła: url ( / obrazy / chmura.png ) ;
rozmiar tła: zawierać;
powtórzenie w tle: brak powtórzeń;
pozycja: absolutna;
góra: 50 pikseli;
szerokość: 200 pikseli;
wysokość: 300 pikseli;
animacja: cloudanimation2;
czas trwania animacji: 15s;
liczba iteracji animacji: nieskończona;
}
Klasa div cloud2 jest stosowana z właściwościami wyjaśnionymi poniżej:-
- “ .chmura2 ” służy do uzyskiwania dostępu do klasy cloud2.
- “ zdjęcie w tle ” jest ustawiona jako url(/images/cloud.png), gdzie obraz jest folderem zawierającym obraz cloud.png.
- “ rozmiar tła ” zawiera wartość zapewniającą widoczność obrazu.
- “ powtarzanie tła ” z wartością ustawioną jako brak powtórzeń powoduje wyświetlenie obrazu jako bez powtórzeń.
- “ pozycja ” jako bezwzględne pozycjonuje obraz względem elementu nadrzędnego.
- “ Top ” ustawia obraz na 100px od góry.
- “ szerokość ” służy do ustawienia szerokości elementu div.
- “ wzrost ” służy do ustawiania wysokości elementu div.
- “ animacja ” otrzymuje nazwę cloudanimation2.
- “ czas trwania animacji ” reprezentuje czas trwania animacji.
- “ liczba iteracji animacji ” ma przypisaną wartość nieskończoną, która będzie powtarzać animację nieskończoną liczbę razy.
Określ @klatki kluczowe dla cloudanimation1
@ animacja w chmurze klatek kluczowych1 {
do {
po lewej: 0 pikseli;
}
z {
lewy: 100 % ;
}
}
Element div cloud1 jest powiązany z animacją opisaną poniżej:-
- “ @keyframes cloudanimation1 ” po nazwie animacji cloudanimation1 następuje słowo kluczowe @keyframes, które służy do określania przejścia.
- Słowo kluczowe @keyframes określa, w jaki sposób animacja jest wykonywana od początku do końca na obrazach w chmurze.
- „ do ' oraz ' z ” słowa kluczowe określają, że chmura1 przesunie się ze 100% do 0 pikseli ekranu.
Określ @klatki kluczowe dla cloudanimation2
@ animacja w chmurze klatek kluczowych2 {
0 % {
lewy: 0 % ;
}
100 % {
lewy: 100 % ;
}
}
Klasa div cloud2 jest powiązana z animacją wyjaśnioną poniżej:-
- “ @keyframes cloudanimation2 ” reprezentuje nazwę animacji cloudanimation2, po której następuje słowo kluczowe @keyframes używane do określenia animacji.
- „ 0% ' oraz ' 100% ” reprezentują początek i koniec animacji.
- Przy 0% animacji chmura znajdowałaby się po lewej stronie z wartością ustawioną na 0% i stopniowo przesuwałaby się do 100% szerokości.
Wyjście
To super! Omówiliśmy, w jaki sposób możemy pomyślnie określić animację elementów za pomocą słowa kluczowego @keyframes.Wniosek
CSS pozwala nam stosować style do elementów HTML. Animacja w CSS wykonuje przejścia z jednego stylu do drugiego. Składa się z dwóch komponentów, stylów animacji i klatek kluczowych. Style animacji reprezentują różne właściwości, takie jak nazwa, czas trwania animacji, liczba iteracji animacji i inne. Podczas gdy komponent klatki kluczowej określa początek i koniec animacji. W tym przewodniku omówiono sposób konfigurowania klatek kluczowych animacji wraz z przykładami.
- Dodaj element