Jak skonfigurować klatki kluczowe animacji CSS

Język HTML zapewnia strukturę strony internetowej, a CSS zapewnia projektowanie i formatowanie tej aplikacji. Ta kombinacja pozwala również dodać animację, ponieważ animowane elementy wyglądają bardziej atrakcyjnie w porównaniu z elementami statycznymi. Pozwala także stopniowo zmieniać element swój styl.

W tym artykule poprowadzi sposób, w jaki możemy zastosować animację do elementów. Więc zacznijmy!

Co to są klatki kluczowe CSS Animation?

Aby wykonać animację, musimy powiązać animację z elementem HTML. W tym celu użyj słowa kluczowego ”@Keyframes”, A następnie nazwa animacji. Ten komponent określa początek i koniec animacji.

Jak skonfigurować klatki kluczowe animacji CSS?

Aby skonfigurować klatki kluczowe w CSS, przejdziemy przez dwa przykłady.

Przykład 1

Do konfigurowania klatek kluczowych w CSS wykonaj następujące kroki:

• • Dodaj nazwę klasy „Main-Div".
  • Wewnątrz div dodaj kolejną div z nazwą klasy „IMG-Peng".
  • Wewnątrz tego IMG-Peng Div, dodaj, aby umieścić obraz. Ten znacznik ma trzy atrybuty, „src„Atrybut, aby zapewnić ścieżkę obrazu”, „Alt”To alternatywny tekst dodawany, jeśli obraz nie jest wyświetlany, oraz„ „szerokość”Atrybut zapewnia szerokość obrazu.

Html

CSS

.Main-Div
Szerokość: 90%;
Wysokość: 90px;
kolor tła: RGB (67, 66, 87);
Margines: 20px Auto;
Wyściółka: 10px;

W CSS „.Main-Div”Dodaje się, aby uzyskać dostęp do klasy DIV. Zastosowane do niego właściwości są wyjaśnione poniżej:

• • "szerokość„Wartość właściwości określa szerokość DIV.
  • "wysokość„Własność jest wykorzystywana do ustawiania wysokości DIV.
  • "kolor tła„Właściwość stosuje kolor do tła elementu.
  • "margines”Jest ustawiony jako„20px Auto”, Który wskazuje przestrzeń od góry i dolną, a automatyczne oznacza równe miejsce od lewej i prawej.
  • "wyściółka„Wartość właściwości jest przypisywana jako 10px, co stosuje przestrzeń wokół treści elementu.

Style IMG-Peng Class

.IMG-Peng
szerokość: 50px;
Wysokość: 100px;
Pozycja: względny;
Animacja: Shake;
Czas trwania animacji: 2s;
funkcja animacji: 2s;
Animacja-Iteration-Count: Infinite;

„„.IMG-Peng”Służy do dostępu do klasy DIV, wymienionych w powyższym pliku HTML. Ten element DIV jest stylizowany z właściwościami omówionymi poniżej:

• • "szerokość„Wartość właściwości jest wykorzystywana do ustawienia szerokości elementu.
  • "wysokość„Wartość właściwości jest wykorzystywana do ustawienia wysokości elementu.
  • "pozycja„Wartość jest przypisana wartość”względny”, Co oznacza, że ​​zostanie ustawiony w stosunku do swojej normalnej pozycji.
  • "animacja„Nazwa jest podana jako„potrząsnąć". Możesz jednak nazwać animację zgodnie z wymogiem.
  • "Czas trwania animacji”Reprezentuje czas trwania animacji, która wynosi 2 sekundy.
  • "funkcja animacji”Przypisuje się wartość 2s, co oznacza w ciągu 2 sekund, animacja jest zakończona.
  • "Animacja-iteration-Count”Jest ustawione jako nieskończone, co oznacza, że ​​ta animacja wystąpi w nieskończonym czasie.

Zdefiniuj @Keyframes z słowami kluczowymi

@Keyframes Shake
z
TOP: 50px;

Do
Bottom marginesowy: 200px;

Opis klatek kluczowych animentacyjnych ustawionych na obraz jest wymieniony poniżej:

• • "@Keyframes Shake”Odnosi się do wstrząsu animacji, a następnie słowa kluczowego @KeyFrames. Zgodnie z tą zasadą określono zachowanie animacji.
  • Wewnątrz kręconych nawiasów, „z" I "Do”Słowa kluczowe określają różne przedziały w celu zdefiniowania zachowania animacji.
  • „„szczyt”Właściwość przypisuje się wartość 50px, co oznacza, że ​​animacja zaczyna się od 50px od góry ekranu i jest kontynuowana 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 @KeyFrame.

Określ @Keyframes z wartościami procentowymi

@Keyframes Shake
0%
po lewej: -50px;

25%
po lewej: 50px;

50%
po lewej: -25px;

75%
Po lewej: 25px;

100%
po lewej: 10px;

Tak więc opis powyższego fragmentu kodu jest wspomniany tutaj:

• • Wartości procentowe 0%, 25%, 50%, 75%i 100%reprezentują animację w różnych odstępach czasu.
  • Ponadto, przy 0%, przestrzeń po lewej stronie obrazu będzie „-50px". Przy 25%, przestrzeń po lewej będzie „50px". Przy 50%przestrzeń po lewej będzie „-25px". Na 75%lewa przestrzeń będzie „25px”, A kiedy animacja zakończy się (100%), lewa przestrzeń będzie„10px".

Powyższy kod wyświetla następującą animację:

Weźmy kolejny przykład, aby zobaczyć, jak możemy ustawić animacje na obrazach.

Przykład 2

W HTML dodaj nazwę klasy „Strona główna". Wewnątrz tego elementu umieść jeszcze dwa tagi Div z klasami „Cloud1" I "Cloud2”Odpowiednio.

Html

CSS

ciało
Margines: 0;
Wyściółka: 0;

W CSS przypisamy następujące właściwości CSS do elementu ciała:

• • "margines”Właściwość, ponieważ 0 nie określa miejsca wokół elementu.
  • "wyściółka”Właściwość o wartości 0 nie określa miejsca wokół treści elementu.

Div główny styl

.Strona główna
Image tła: URL (/obrazy/wilk-noc.png);
Powtórzenie tła: bez powtórzenia;
Rozmiar tła: okładka;
Wysokość: 100 VH;
Pozycja: względny;
Olflow: ukryty;

Tutaj:

• • ".Strona główna”Służy do dostępu do klasy DIV.
  • "zdjęcie w tle„Wartość jest przypisana wartość”URL (/Images/Wolf-Night.PNG)„Gdzie obrazy to folder zawierający obraz Wolf-Night.png.
  • "powtarzanie tła„Wartość jest przypisana wartość”bez powtórki, co oznacza, że ​​obraz zostanie wyświetlony raz.
  • "Rozmiar tła”Jest ustawiony jako„okładka„Aby wypełnić cały element DIV.
  • "wysokość”To 100 VH, czyli 100% wysokości rzutni.
  • "pozycja”Jako ustawienie ustawień pozycji obrazu w stosunku do jego obecnej 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 pojemniku.

Style Cloud1 Class

.Cloud1
Image tła: URL (/obrazy/chmura.png);
Rozmiar tła: zawiera;
Powtórzenie tła: bez powtórzenia;
Pozycja: absolutna;
TOP: 100px;
szerokość: 500px;
Wysokość: 300px;
Animacja: Cloudanimation1;
Czas trwania animacji: 70.;
Animacja-Iteration-Count: Infinite;

Cloud klasy DIV jest stosowany z następującymi wyjaśnionymi właściwościami:

• • ".Cloud1”Służy do uzyskania dostępu do Cloud Cloud1 DIV.
  • "zdjęcie w tle„Właściwość jest ustawiona jako adres URL (/obrazy/chmura.png), gdzie obrazy są folderem zawierającym chmurę obrazu.png.
  • "Rozmiar tła”Z wartością„zawierać”Zapewnia widoczność obrazu.
  • "powtarzanie tła„Właściwość z ustawioną wartością jako„bez powtórki”Wyświetla obraz jako nie powtórzony.
  • "pozycja”Jako absolutne pozycje obrazu w stosunku do elementu rodzica.
  • "szczyt”Właściwość ustawia obraz na 100px od góry.
  • "szerokość„Właściwość jest wykorzystywana do ustawiania szerokości elementu DIV na 500px.
  • "wysokość„Właściwość jest wykorzystywana do ustawiania wysokości elementu DIV na 300px.
  • "animacja”Nazwa CloudaniMation1.
  • "Czas trwania animacji”Reprezentuje czas trwania animacji, która wynosi 70 sekund.
  • "Animacja-iteration-Count”Przypisuje się wartość nieskończona, która iteruje nieskończone czasy animacji.

Do tej pory zastosowaliśmy właściwości CSS do głównej strony klasy DIV i Cloud1. Teraz, w następnej sekcji, stylizujemy następną klasę DIV o nazwie Cloud2.

Style Cloud2 Class

.Cloud2
Image tła: URL (/obrazy/chmura.png);
Rozmiar tła: zawiera;
Powtórzenie tła: bez powtórzenia;
Pozycja: absolutna;
TOP: 50px;
szerokość: 200px;
Wysokość: 300px;
Animacja: CloudaniMation2;
Czas trwania animacji: 15s;
Animacja-Iteration-Count: Infinite;

Cloud klasy DIV jest stosowany z właściwościami wyjaśnionymi poniżej:

• • ".Cloud2”Służy do dostępu do klasy Cloud2.
  • "zdjęcie w tle„Właściwość jest ustawiona jako adres URL (/obrazy/chmura.png), gdzie obraz jest folderem zawierającym chmurę obrazu.png.
  • "Rozmiar tła”Zawiera wartość zapewnia widoczność obrazu.
  • "powtarzanie tła„Właściwość z ustawioną wartością jako bez powtórki wyświetla obraz jako nie powtórny.
  • "pozycja”Jako absolutne pozycje obrazu w stosunku do elementu rodzica.
  • "szczyt”Właściwość ustawia obraz na 100px od góry.
  • "szerokość„Własność jest wykorzystywana do ustawienia szerokości elementu DIV.
  • "wysokość„Właściwość jest wykorzystywana do ustawienia wysokości elementu DIV.
  • "animacja”Nazwa CloudaniMation2.
  • "Czas trwania animacji”Reprezentuje czas trwania animacji.
  • "Animacja-iteration-Count”Przypisuje się wartość nieskończona, która iteruje nieskończone czasy animacji.

Określ @KeyFrames dla CloudaniMation1

@KeyFrames CloudaniMation1
Do
po lewej: 0px;

z
po lewej: 100%;

Cloud1 Div jest związany z animacją, która jest opisana poniżej:

• • "@Keyframes CloudaniMation1„Po nazwie Animation Cloudanimation1 następuje słowo kluczowe @KeyFrames, które służy do określenia przejścia.
  • Słowo kluczowe @KeyFrames określa, w jaki sposób animacja odbywa się od początku do końca na obrazach w chmurze.
  • „„Do" I "z„Słowa kluczowe określają, że Cloud1 przesunie się ze 100% do 0px ekranu.

Określ @KeyFrames dla CloudaniMation2

@KeyFrames CloudaniMation2
0%
po lewej: 0%;

100%
po lewej: 100%;

Cloud klasy DIV jest powiązany z animacją wyjaśnioną poniżej:

• • "@Keyframes CloudaniMation2”Reprezentuje nazwę animacji CloudaniMation2, a następnie słowo kluczowe @KeyFrames, które służy do określenia animacji.
  • „„0%" I "100%”Reprezentuj początek i koniec animacji.
  • Przy 0% animacji chmura byłaby po lewej stronie z ustawioną wartością jako 0% i stopniowo przesunie się do 100% szerokości.

Wyjście

To super! Omówiliśmy, w jaki sposób możemy określić animację do elementów za pomocą słowa kluczowego @KeyFrames.

Wniosek

CSS pozwala nam zastosować 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 ich nazwa, czas trwania animacji, animacja-argument i nie tylko. Podczas gdy komponent klatki kluczowej określa początek i koniec animacji. Ten przewodnik opracował, jak skonfigurować klatki kluczy animacji z przykładami.