W tym artykule przedstawiono proces dodawania wieloetapowych animacji i przejść.
Jak korzystać z wieloetapowych animacji i przejść?
Aby utworzyć animację wieloetapową, generowana jest seria klatek kluczowych. Określa serię zmian, które mają zostać zastosowane do wybranego elementu HTML. Każda klatka kluczowa reprezentuje inny stan animacji, a przeglądarka płynnie przechodzi między tymi stanami. Podczas przejść określ płynną zmianę właściwości CSS w określonym czasie poprzez interakcje użytkownika lub zmiany stanu.
Przeanalizujmy praktyczny przykład dla lepszego zrozumienia:
Przykład 1: Stosowanie animacji wieloetapowej
W tym przykładzie wieloetapowa animacja zostanie zastosowana do wybranego elementu HTML. Odwiedź poniższą demonstrację:
< styl >
.animationPrzykład {
szerokość: 130px;
wysokość: 130 pikseli;
kolor tła: leśna zieleń;
pozycja: względna;
animacja: moveAnimate 4s łatwość wprowadzania i wyłączania nieskończona;
}
< / styl >
< ciało >
< dz klasa = „przykład animacji” >< / dz >
< / ciało >
W powyższym fragmencie kodu:
- Najpierw klasa o nazwie „ animacjaPrzykład ” jest wybrane wewnątrz „
”znacznik. - Następnie wartości „ 130 pikseli ” są przypisane do „ wysokość ' I ' szerokość ' nieruchomości.
- Ponadto ustaw „ zielony las ' I ' względny ” jako wartość dla „ kolor tła ' I ' pozycja ” poprawiające wizualizację.
- Następnie użyj „ animacja ” i ustaw ją jako równą „ moveAnimate 4s umożliwia nieskończone wprowadzanie i wyjmowanie ”, aby zastosować animacje.
- Wartość składa się z czterech części, pierwsza to niestandardowa animacja nazwy, druga to czas trwania do ukończenia, trzecia to typ animacji, a czwarta to limit, ile razy ta animacja ma zostać zastosowana.
- Na koniec utwórz element HTML i przypisz „ animacjaPrzykład klasa do tego.
Teraz użyj „ klatki kluczowe ”reguła definiowania zwyczaju” animuj ' animacja:
@ animuj klatki kluczowe {0 % {
lewy: 0 ;
kolor tła: niebieski;
}
pięćdziesiąt % {
po lewej: 200px;
kolor tła: leśna zieleń;
przekształcać: obracać ( 180 stopni ) ;
}
100 % {
lewy: 0 ;
kolor tła: niebieski;
}
}
W powyższym bloku kodu:
- Po pierwsze ' @klatki kluczowe ” tworzony jest blok wraz z nazwą niestandardowej animacji, która ma zostać zdefiniowana.
- Następnie utwórz blok o nazwie „ 0% ”, który stosuje style CSS na początku animacji. I wykorzystaj „ kolor tła ' I ' lewy „Właściwości CSS.
- Teraz utwórz blok o nazwie i „ pięćdziesiąt% ”, aby stylizować w środku animacji. Podaje wartości „ 200 pikseli ”, „ zielony las ' I ' obróć (180 stopni) ” do właściwości „left”, „background-color” i „transform”. Pozwala to wybranemu elementowi obrócić w lewo o 200px.
Po skompilowaniu powyższego bloku kodu:
Dane wyjściowe pokazują, że wieloetapowa animacja została zastosowana do wybranego elementu HTML.
Przykład 2: Stosowanie przejścia wieloetapowego
Aby zastosować przejście wieloetapowe, można użyć selektorów CSS wraz z „ przemiana ' nieruchomość. Odwiedź poniższy kod:
.znikać {
krycie: 1;
przejście: krycie 1s;
}
.fade:hover {
krycie: 0;
}
<
/ styl>
<
ciało>
< P klasa = 'znikać' > Najedź na mnie kursorem, aby zobaczyć przejście. < / P >
< / ciało >
Wyjaśnienie powyższego kodu:
- Po pierwsze, zwyczaj „ znikać ” jest wybrana klasa i wartość 1 jest podawana do „ nieprzezroczystość ' nieruchomość. Ustaw także wartość „ krycie 1s ' do ' przemiana „Właściwość CSS. Spowoduje to ustawienie lub usunięcie krycia na czas „ 1s ”.
- Następnie „ :unosić się selektor jest przypisany do znikać ' klasa. W nim wartość „ 0 ” jest ustawiona na właściwość opacity.
- Na koniec element HTML jest tworzony wewnątrz „
” i klasa „ znikać ” jest do niego dołączony.
Po zakończeniu fazy kompilacji strona wygląda następująco:
GIF pokazuje, że niestandardowe przejście zanikania zostało zastosowane do wybranego elementu HTML.
Wniosek
Wieloetapowe animacje i przejścia ożywiają strony internetowe HTML, dodając ruch i efekty wizualne. W przypadku animacji „ klatki kluczowe ” są wykorzystywane wraz z procentem czasu trwania, takim jak „ 0% ” to początek, „ pięćdziesiąt% ” to środek, a „ 100% ” oznacza koniec czasu trwania animacji. Do przejścia można użyć selektora CSS wraz z „ przemiana ' klasa. W tym artykule zademonstrowano proces korzystania z wieloetapowych animacji i przejść.