Ożyw swoje strony internetowe za pomocą animacji i przejść CSS

Opublikowany: 2017-10-09

Projekty stron internetowych stale się rozwijają. Od responsywnego designu, pięknej typografii, doskonałych schematów kodowania kolorów, ilustracji, twórcy stron internetowych codziennie wymyślają nowe pomysły i projekty.

Użytkownicy mają obecnie wysokie oczekiwania wobec interfejsów użytkownika ze względu na tak wysokiej jakości treści dostępne w Internecie. Ponieważ interfejsy stron internetowych ewoluują, podobnie jak technologia, która za nimi stoi. Jednym z głównych komponentów odpowiedzialnych za ulepszanie interfejsu strony internetowej jest CSS .

CSS lub Cascading Style Sheets są odpowiedzialne za uczynienie witryn bardziej interaktywnymi poprzez zdefiniowanie ich stylu, układu, projektów. Najnowszy standard CSS, czyli CSS3, wprowadził koncepcję animacji i przekształceń , które poprawiają wrażenia użytkownika poprzez dodanie dodatkowej głębi do interfejsu użytkownika. Dzięki animacjom i przejściom CSS możesz opowiadać historie, tworzyć wspaniałe efekty i sprawić, by interakcja użytkownika z Twoją witryną była skuteczna i znacząca.

Animacja to po prostu symulacja ruchu, która powstaje poprzez wyświetlanie serii obiektów, takich jak obrazy jeden po drugim. Z drugiej strony przejście to zasadniczo proces, w którym obiekt przechodzi z jednego stanu do drugiego. Ale kiedy mówimy o animacjach internetowych, istnieją zasadniczo trzy typy – animacje CSS lub animacje klatek kluczowych, przejścia CSS i animacje JavaScript .

Animacje CSS

Aby tworzyć animacje w CSS, musimy zmienić właściwości CSS elementu, takiego jak obraz lub tekst, na określony czas. Możemy zmieniać właściwości elementów tyle razy, ile chcemy, a także możemy ustawić czas trwania animacji.

Określanie @klatek kluczowych

Animacje CSS są definiowane bitowo za pomocą klatek kluczowych. Te klatki kluczowe są punktami pośrednimi animacji. Wszystkie animacje CSS są określone w regule @keyframes. Te klatki kluczowe określają, co dzieje się z elementem w określonym momencie, czyli:

  • jakie właściwości się zmieniają
  • kiedy element animuje
  • jak animuje element

Możesz zdefiniować własną klatkę kluczową jako:

[css]
@keyframes nazwa_animacji
{
from{ właściwość: wartość; }
to{ właściwość: wartość; }
}
[/css]

Tutaj „do” i „od” określają początek i koniec animacji. Możemy również określić animacje dla pośrednich momentów czasu między początkiem a końcem w ten sposób:

[css]
@nazwa klatki kluczowej
{
0%{ właściwość: wartość; }
50%{ własność: wartość; }
100%{ właściwość: wartość; }
}
[/css]

Tutaj 0% reprezentuje początek animacji, 100% reprezentuje koniec animacji, a 50% oznacza zmianę pomiędzy początkiem i końcem. Ale jak powiedzieć przeglądarce, ile czasu powinna trwać animacja? Robimy to za pomocą pewnych właściwości animacji . Te właściwości animacji są skojarzone z animowanym elementem. Na przykład:

[css]
nazwa_elementu
{
animacja_właściwość: wartość;
style_property: wartość;
}
[/css]

Tutaj elementem może być dowolny znacznik HTML, taki jak div, span, img, p itp., a style_property to dowolna właściwość stylizacji CSS, taka jak background_color, width, height itp. Przyjrzyjmy się teraz szczegółowo niektórym właściwościom animacji.

  1. @keyframes : Klatki kluczowe są używane do określenia kodu animacji, jak omówiono powyżej.
  2. nazwa-animacji : nazwa określona za pomocą @keyframes jest nazwą animacji. Ta nazwa jest używana do odwoływania się do klatek kluczowych z elementem, który ma być animowany.
  3. Animation-duration : Służy do określenia czasu trwania animacji w sekundach lub milisekundach. Na przykład, jeśli ustawimy ją na 5 sekund, animacja będzie trwać tylko przez 5 sekund. Jeśli nie ustawimy tej właściwości, animacja w ogóle się nie uruchomi, ponieważ jej domyślna wartość to 0.
  4. Animation-delay : Możemy opóźnić rozpoczęcie animacji przez określenie czasu opóźnienia animacji. Na przykład, jeśli chcesz rozpocząć animację 5 sekund po załadowaniu strony w przeglądarce, po prostu ustaw opóźnienie animacji na 5s.
  5. Animation-direction : Możemy powiedzieć przeglądarce, czy animacja porusza się w odwrotnym kierunku, czy też zmienia cykle z tą właściwością. Na przykład, jeśli chcesz, aby animacja przebiegała od początku do końca, ustaw wartość czasu trwania animacji jako „normalną”. Jeśli chcesz, aby działał od końca do początku, po prostu ustaw wartość na „odwróć”.
  6. Animation-fill-mode : Możemy określić styl elementu, gdy animacja nie jest odtwarzana w tym trybie, tj. gdy animacja jest opóźniona lub zakończona, jaki powinien być styl elementu.
  7. Animation-iteration-count : ta właściwość określa, ile razy animacja może być odtwarzana. Na przykład, jeśli chcesz odtworzyć animację raz, ustaw ją na 1 lub jeśli chcesz, aby animacja była odtwarzana w nieskończoność, po prostu ustaw ją na „nieskończoną”.
  8. Animation-timing-function : Ta właściwość jest używana do określenia krzywej prędkości animacji, takiej jak liniowa, przyspieszanie lub zwalnianie.
  9. Animation : Jest to skrócona właściwość do ustawiania wszystkich właściwości animacji.

Na przykład możesz animować odbijający się obiekt za pomocą następującego fragmentu kodu. Zwróć uwagę, jak został tutaj użyty skrócony zapis animacji.

[css]
@klatki kluczowe slajd {
0% {
po lewej: 0;
góra: 0;
}
50% {
lewy: 244px;
góra: 100px;
}
100% {
lewy: 488px;
góra: 0;
}
}

.stage:najedź .obiekt {
animacja: slajd 2s liniowy; /*skrócona właściwość animacji*/
}

.obiekt {
tło: #2db34a;
promień graniczny: 50%;
wysokość: 50px;
pozycja: bezwzględna;
szerokość: 50px;
}
[/css]

Przejścia

Przejścia CSS są stosowane do właściwości elementów przez określony czas trwania w oparciu o określone funkcje czasowe zwane funkcjami wygładzania. Przez funkcję taktowania rozumiemy funkcję, która zmieni właściwości elementów z jednego stanu do drugiego, takie jak postęp liniowy, przyspieszenie lub spowolnienie. Być może zauważyłeś, że obraz przesuwa się lub przekształca w inny obraz po najechaniu myszą lub dźwięk jest odtwarzany po kliknięciu myszą. Są to wszystkie efekty przejścia, które mogą sprawić, że witryna będzie interaktywna.

Funkcje wygładzania są ważne przy tworzeniu przejść. Określają, jak zmienią się właściwości. Mogą również zmieniać szybkość, z jaką zmienia się wartość właściwości od punktu początkowego do punktu końcowego przejścia. Możesz zastosować przejścia w następujący sposób:

[css]
element
{
style_property: wartość;
Transition_property: wartość;
}
[/css]

Tutaj element określa element HTML, który chcesz przekształcić, jak div, H1, img itp. style_property to styl CSS zastosowany do tego elementu. Przyjrzyjmy się teraz niektórym właściwościom przejścia :

  • transition-property : Efekt przejścia będzie zawsze stosowany do właściwości CSS elementu, takich jak jego szerokość, wysokość, kolor lub kształt. Wartość tego atrybutu określa, że ​​właściwość CSS elementu. Efekt przejścia rozpocznie się za każdym razem, gdy zmieni się ta właściwość, na przykład po najechaniu myszą lub kliknięciu.
  • Transition-timing-function : Jest to funkcja ułatwienia, którą można zastosować do elementu. Ta właściwość służy do określania krzywej prędkości przejścia, takiej jak rozluźnienie, zwolnienie, liniowa itp.
  • transition-duration : To jest jak właściwość czasu trwania animacji. Służy do określenia czasu trwania efektu przejścia w sekundach lub milisekundach. Na przykład, jeśli ustawimy go na 5 sekund, przejście wpłynie na zakończenie w ciągu 5 sekund. Jeśli nie ustawimy tej właściwości, przejście w ogóle nie nastąpi, ponieważ jej wartość domyślna to 0.
  • transition-delay : Za pomocą tej właściwości możemy określić czas trwania opóźnienia efektu przejścia. Na przykład, jeśli chcesz uruchomić efekt 5 sekund po najechaniu myszą, po prostu ustaw opóźnienie przejścia na 5s.
  • przejście : Jest to skrócona właściwość do ustawiania wszystkich powyższych właściwości przejścia razem.

Na przykład poniższy kod zmieni szerokość elementu div po najechaniu myszą. Zobacz skróconą właściwość przejścia zastosowaną tutaj.

[css]
dziel {
szerokość: 50px;
wysokość: 50px;
tło: niebieskie;
przejście: wysokość 4s; /*przejście skrócone na wysokość przez 4 sekundy*/
}
div:najedź {
wysokość: 200px; /* zwiększ wysokość po najechaniu myszą */
}
[/css]

Animacje a przejścia

Animations vs. Transitions

Podobieństwa między animacjami a przejściami
  • Zarówno przejście, jak i animacja służą do wizualizacji zmian we właściwościach elementu.
  • Możemy określić czas, przez jaki ma trwać przejście i animacja.
  • Mamy pewne funkcje czasowe, które zmieniają szybkość przechodzenia od jednej wartości do drugiej dla przejść oraz animacji.
Różnice między animacjami a przejściami
  • Przejścia CSS są reaktywne . Muszą być uruchamiane przez użytkowników. Z drugiej strony animacje uruchamiają się za każdym razem, gdy strona ładuje się w przeglądarce. Nie muszą być uruchamiane.
  • Przejścia uruchamiane są raz, a następnie zatrzymują się. Następnie musimy je uruchamiać raz za razem, podczas gdy animacje mogą się zapętlać . Mogą zacząć od własnego zatrzymania, a potem ponownie zacząć.
  • Przeglądarka sama zajmuje się przejściami. Musimy tylko określić początek i koniec przejścia. Możemy ustawić efekt przejścia, ale nie możemy zmienić szybkości zmiany przejścia pomiędzy. Na przykład, jeśli obraz przesunie się po najechaniu myszą, zobaczymy, jak pojawia się lub znika, gdy najedziemy na niego kursorem.
  • Z drugiej strony animacje zapewniają elastyczność zmiany właściwości między początkiem a końcem. Dzieje się to za pomocą klatek kluczowych. Na przykład możemy ustawić kolor obrazu na czerwony przez pierwsze 5 sekund, następnie niebieski przez następne 5 sekund, zielony przez następne 5 sekund i żółty przez ostatnie 5 sekund animacji. Dzięki temu mamy kontrolę nad animacjami.
Prefiksy dostawcy

Nie wszystkie funkcje CSS3 są obsługiwane przez każdą przeglądarkę. Dlatego używamy przedrostków wzdłuż tych właściwości CSS dla określonych przeglądarek, takich jak -webkit- (Safari), -moz- (Firefox) lub -o- (Opera). Dzięki temu znaczniki przeglądarki mogą dodać obsługę tej funkcji CSS3. Te prefiksy są znane jako prefiksy dostawcy lub prefiksy przeglądarki CSS . Dlatego musimy umieścić prefiksy dostawcy wraz z animacją i właściwościami przejścia. Na przykład rozważ poniższy kod i zobacz, jak zostały użyte przedrostki dostawcy dla Safari:

[css]
dziel {
szerokość: 100px;
wysokość: 100px;
tło: czerwone;

/* Dla Safari od 3.1 do 6.0 */
-webkit-transition-property: szerokość;
-czas trwania przejścia na webkit: 2s;
-webkit-transition-time-funkcja: liniowa;
-opóźnienie przejścia na webkit: 1s;

/* Standardowa składnia */
właściwość przejściowa: szerokość;
czas przejścia: 2s;
funkcja czasu przejścia: liniowa;
opóźnienie przejścia: 1s;
}
[/css]

Wskazówka! Możesz uniknąć tego zamieszania, korzystając z bibliotek takich jak -prefix-free . Jest to biblioteka JavaScript, która doda prefiks bieżącej przeglądarki do dowolnego kodu CSS. Sprawdź wiele takich bibliotek dostępnych w sieci.

Wniosek

Twórcy witryn mogą stosować animacje i przekształcenia, aby przyciągnąć użytkowników do Twoich witryn. Możesz ich używać do ulepszania formularzy, powiadomień, grafiki tła, obrazów, wykresów, doodli, przycisków wezwania do działania i innych. Po prostu użyj swojej wyobraźni, a znajdziesz sposób na zadziwienie użytkowników. Pamiętaj, że nawet niewielka zmiana w Twojej witrynie może znacznie poprawić jej wygląd i zwiększyć jej wartość. Czy używałeś już animacji na swojej stronie? Podziel się przemyśleniami na temat korzystania z animacji i przejść.