CSS to jeden z najpotężniejszych sposobów na uczynienie strony internetowej interaktywną. Zmienia wygląd naszego podstawowego Strona internetowa. Jedną z ważnych i ekscytujących funkcji oferowanych przez CSS jest to, że pozwala nam wykonywać animacje. Pozwala nam przesuwać elementy w obrębie naszej strony. Rozpocznijmy naszą podróż po animacjach w CSS w następującej kolejności:
Animacje w CSS
Dodanie animacji do naszego serwisu to świetny sposób na zwrócenie uwagi użytkowników. Nie tylko dodaje wartości naszej stronie, ale także wzbogaca doświadczenie użytkownika. Animacja w CSS składa się z dwóch części. Oni są
- Klatki kluczowe
- Animacja
Animacje CSS są obsługiwane we wszystkich przeglądarkach. Jednak niektóre starsze przeglądarki, takie jak Safari (do wersji 8.0), wymagają przedrostka (-webkit-) do interpretacji właściwości animacji. Na przykład:
.anim {wysokość: 200px szerokość: 200px tło: jasnoniebieskie położenie: względny border-promień: 100% -webkit-nazwa-animacji: cssanim / * stare przeglądarki * / -webkit-animacja-czas trwania: 5s / * stare przeglądarki * / animacja -name: cssanimanimation-duration: 5s} / * stare przeglądarki * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {pozostało: 300px}}Możemy użyć przykładowej strony html z góry i zastąpić kod CSS w tagu style, aby wypróbować dalsze przykłady.
Klatki kluczowe w CSS
To jest budulec animacji w CSS. Służyło do definiowania konkretnych momentów i stylów animacji na naszej stronie. Innymi słowy, kiedy określimy @keyframes w naszym CSS, uzyskuje on kontrolę nad modyfikacją bieżącego stanu do nowego stanu lub animacją obiektów przez określony czas.
@Keyframes muszą mieć określone właściwości, aby sterować animacją, takie jak nazwa animacji, etapy i właściwości.
Nazwa - Każda animacja musi mieć nazwę opisującą jej zachowanie.
co to jest impas w Javie
Gradacja - Scena przedstawia zakończenie animacji. Można to zrobić oznaczając słowami kluczowymi „to” i „from” lub jako wartość procentową, podczas gdy 0% reprezentuje stan początkowy, a 100% reprezentuje stan końcowy animacji. Zaletą użycia reprezentacji procentowej jest to, że możemy zdefiniować wiele etapów pośrednich pomiędzy, tj. Jakie powinno być zachowanie animacji na etapie 50% lub 75% itd.
Nieruchomości - Te właściwości dają nam kontrolę nad @keyframes w celu manipulowania nimi podczas animacji.
.anim {wysokość: 200px szerokość: 200px tło: jasnoniebieskie położenie: względny border-radius: 100% nazwa-animacji: cssanim czas trwania animacji: 5s} @keyframes cssanim {0% {transform: scale (0.5) krycie: 0} 50 % {transform: scale (1.5) krycie: 1} 100% {transform: scale (1)}}Teraz, ponieważ mamy jasność co do definiowania klatek kluczowych. Przyjrzyjmy się właściwościom animacji, aby opisać, jak animować nasze elementy i obiekty. Te dwie właściwości, tj. Inherit i initial, mogą być używane we wszystkich typach animacji. Te właściwości są zwykle używane razem ze znacznikiem DIV do wykazywania różnych zachowań.
Inicjał: Ustawia tę właściwość na jej wartość domyślną.
dziedziczyć: Dziedziczy tę właściwość z elementu nadrzędnego.
Właściwości animacji
- nazwa-animacji
Określa nazwę animacji, która jest używana w @keyframes do manipulowania.Możliwe wartości to:
- Nazwa: Określa nazwę powiązaną z klatką kluczową na potrzeby animacji.
- Żaden: Jest to wartość domyślna i może służyć do zastępowania animacji dziedziczonych lub kaskadowych.
Składnia:
nazwa-animacji: nazwa | brak | początkowy | dziedziczyć
.anim {wysokość: 200px szerokość: 200px background: lightblue position: względna border-radius: 100% nazwa-animacji: cssanimanimation-duration: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- czas trwania animacji
Określa czas potrzebny do zakończenia animacji podczas jednego wykonania. Jest definiowany w sekundach lub milisekundach (np. 4s lub 400ms). Domyślną wartością tej właściwości jest 0, więc jeśli ta właściwość nie zostanie określona, animacja nie będzie miała miejsca.
Składnia:
czas trwania animacji: czas
.anim {wysokość: 200px szerokość: 200px tło: niebieskie położenie: względny border-radius: 100% nazwa-animacji: cssanim czas trwania animacji: 4s} @keyframes cssanim {0% {transform: scale (0.4) krycie: 0} 50 % {transform: scale (1.4) krycie: 1} 100% {transform: scale (1)}}- opóźnienie animacji
Właściwość animation-delay pozwala nam określić opóźnienie animacji. Określa, kiedy sekwencja animacji rozpocznie wykonywanie.
Wartość tej właściwości można zadeklarować w sekundach (s) lub milisekundach (ms). Może zawierać zarówno wartości dodatnie, jak i ujemne. Wartość dodatnia oznacza, że animacja rozpocznie się po upływie określonego czasu i do tego czasu pozostanie niezanimowana. Z drugiej strony wartość ujemna spowoduje natychmiastowe rozpoczęcie animacji od punktu, jakby była już wykonywana przez określony czas.
Składnia:
opóźnienie animacji: czas
.anim {wysokość: 200px szerokość: 200px background: lightblue position: względny border-radius: 100% nazwa-animacji: cssanimanimation-duration: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {left: 250px}}- liczba-iteracji-animacji
Ta właściwość wskazuje, ile razy należy odtworzyć sekwencję animacji. Wartość domyślna tej właściwości to 1.Możliwe wartości to:
- numer - oznacza liczbę iteracji
- nieskończony - wskazuje, że animacja powinna się powtarzać w nieskończoność
Składnia:
liczba-iteracji-animacji: liczba | nieskończony
.anim {wysokość: 200px szerokość: 200px background: lightblue position: względny border-radius: 100% nazwa-animacji: cssanim czas trwania animacji: 2s liczba iteracji-animacji: 4} @keyframes cssanim {0% {left: 0px} 100% {pozostało: 100px}}- kierunek animacji
Określa kierunek animacji. Kierunek elementu można ustawić na odtwarzanie do przodu, do tyłu lub w naprzemiennych cyklach.Domyślna wartość tej właściwości jest normalna i jest resetowana w każdym cyklu.Możliwe wartości to:
normalna - Jest to zachowanie domyślne, a animacja jest odtwarzana do przodu. Po każdym cyklu animacja powraca do stanu początkowego i jest ponownie odtwarzana do przodu
odwrócić - Animacja jest odtwarzana do tyłu. Po każdym cyklu animacja osiąga stan końcowy i jest odtwarzana do tyłu
alternatywny - Kierunek animacji jest odwrócony, tzn. W każdym cyklu jest odtwarzana najpierw do przodu, a następnie do tyłu. Każdy nieparzysty cykl renderuje animację do przodu, a każdy parzysty cykl renderuje ruch do tyłu.
alternate-reverse - Kierunek animacji jest na przemian odwracany. Tutaj animacja jest odtwarzana najpierw do tyłu, a następnie do przodu w każdym cyklu. Każdy nieparzysty cykl porusza się do tyłu lub do tyłu, a każdy parzysty cykl renderuje animację do przodu.
Składnia:
kierunek animacji: normalny | wstecz |alternatywny | alternate-reverse
.anim {wysokość: 200px szerokość: 200px background: lightblue position: względna border-radius: 100% nazwa-animacji: cssanimanimation-duration: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {pozostało: 100px}}- funkcja-timingu-animacji
Ta właściwość określa krzywą prędkości lub styl ruchu animacji. Jest przypisany do płynnej zmiany stylu animacji z jednej formy na drugą. Jeśli żadna wartość nie jest przypisana, domyślnie jest to ułatwienie.Możliwe wartości funkcji czasowej animacji to:
łatwość - To jest domyślna wartość właściwości. Tutaj animacja zaczyna się powoli, stopniowo staje się szybka w środku, a potem znowu powoli się kończy.
klasa anonimowa w java]
liniowy - Animacja utrzymuje tę samą prędkość przez cały cykl, czyli od początku do końca.
łatwość - Animacja zaczyna się powoli.
wyluzować - Animacja kończy się powoli.
łatwość wkładania - Animacja porusza się powoli zarówno na początku, jak i na końcu.
sześcienny-bezier (n, n, n, n) - Ta zaawansowana funkcja pozwala nam stworzyć niestandardową funkcję pomiaru czasu poprzez zdefiniowanie naszych własnych wartości. Możliwe wartości mieszczą się w zakresie od 0 do 1.
Składnia:
funkcja-timingu-animacji: liniowa | łatwość | wyluzować | łatwość | łatwość w wyjściu |sześcienny-bezier (n, n, n, n)
.anim {wysokość: 200px szerokość: 200px background: lightblue position: względna border-radius: 100% nazwa-animacji: cssanimanimation-duration: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- tryb wypełnienia animacji
Jest to specjalna właściwość, ponieważ określa styl animacji przed lub po odtworzeniu animacji.Domyślnie animacja przed rozpoczęciem lub po zakończeniu nie ma wpływu na styl elementu. Ta właściwość jest przydatna, ponieważ pomaga w zastępowaniu tego domyślnego zachowania animacji.Poniżej przedstawiono możliwe wartości właściwości trybu wypełnienia animacji:
Żaden - Jest to domyślna wartość właściwości, tj. Style animacji nie są stosowane do elementu, przed ani po animacji.
naprzód - Style są zachowywane przez element w końcowej sekwencji animacji, tj. Po zakończeniu animacji.
wstecz - Style są zachowywane przez element w początkowej sekwencji animacji, tj. Przed uruchomieniem animacji, szczególnie podczas opóźnienia animacji.
obie - Oznacza to, że animacja będzie przebiegać zarówno w kierunku do przodu, jak i do tyłu
Składnia:
tryb wypełnienia animacji: brak | naprzód | do tyłu | obie
.anim {szerokość: 50px wysokość: 50px tło: jasnoniebieski kolor: biały font-weight: pogrubiona pozycja: względna nazwa-animacji: cssanim czas trwania animacji: 5s liczba iteracji-animacji: nieskończona granica-promień: 100%} # anim1 { funkcja-czasu-animacji: easy} # anim2 {funkcja-czasu-animacji: linear} # anim3 {funkcja-czasu-animacji: ułatwienie} # anim4 {funkcja-czasu-animacji: wyluzuj} # anim5 {funkcja-czasu-animacji: funkcja-czasu: easy-in-out} @keyframes cssanim {od {po lewej: 0px} do {po lewej: 400px}}- stan odtwarzania animacji
Ta właściwość określa, że animacja ma być odtwarzana lub wstrzymana. Ponadto wznowienie animacji po wstrzymaniu rozpoczyna się od miejsca, w którym została przerwana.Możliwe wartości to:
- gra - Aby renderować animację w biegu
- wstrzymany - Aby renderować animację w stanie wstrzymania.
Składnia:
stan odtwarzania animacji: wstrzymana | gra
.anim {width: 100px height: 100px background: lightblue position: względna nazwa-animacji: cssanimanimation-duration: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animacja
Jest to znane jako właściwość skrótu animacji. Służy do czystszego kodu. Kiedy już zaznajomimy się ze wszystkimi właściwościami animacji, radzimy użyć skrótu animacji do szybszego kodowania i definiowania wszystkich właściwości w jednej linii.
Składnia:
animacja: [nazwa-animacji] | [czas trwania animacji] | [funkcja-timingu-animacji] |[opóźnienie animacji] | [liczba-iteracji-animacji] | [kierunek animacji] |[tryb wypełnienia animacji] | [stan-odtwarzania-animacji]
Wszystkie efekty animacji, które pokazaliśmy powyżej przy użyciu różnych właściwości animacji, można uzyskać za pomocą skrótuanimacja własność.
.anim {wysokość: 200px szerokość: 200px background: lightblue position: względna border-radius: 100% nazwa-animacji: cssanim czas trwania animacji: 2s kierunek-animacji: normalna animacja-play-state: wstrzymana} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Na tym kończy się wszystkie właściwości animacji, których można używać w CSS. Powinniśmy wypróbować różne warianty tych właściwości, aby uzyskać bardziej przejrzysty obraz. Kiedy poczujemy się komfortowo, właściwość animacji shorthand może być bardzo pomocna w pisaniu czystszego i szybszego kodu. Jest to jedna z ważnych umiejętności, których muszą się nauczyć twórcy stron internetowych w CSS. Ponieważ skupiamy się bardziej na obiektach poruszających się niż statycznych, animacje mogą nam w tym pomóc, a także tworzyć wspaniałe, niezwykłe strony internetowe.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „Animacje w CSS”, a my skontaktujemy się z Tobą.