Implementacja serwisów internetowych

Animacje CSS – jak skutecznie animować obiekty HTML, przykłady preloaderów

Animacje CSS

Animacje CSS

Animacje CSS zostały wprowadzone w trzeciej wersji języka kaskadowych arkuszy stylów i są wspierane przez przeglądarki od następujących wersji:

  • Google Chrome 4.0 (do wersji 43.0 wymagany przedrostek -webkit-)
  • Mozilla Firefox 5.0 (do wersji 16.0 wymagany przedrostek -moz-)
  • Opera 12.0 (do wersji 15.0 wymagany przedrostek -o-, do wersji 30.0 wymagany przedrostek -webkit-)
  • Internet Explorer 10.0
  • Microsoft Edge
  • Safari 4.0 (do wersji 9.0 wymagany przedrostek -webkit-)

Animacje CSS wywołuje się za pomocą funkcji animation, której zadaniem jest zmiana właściwości animowanego obiektu. Podstawowa składnia funkcji to:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Poszczególne parametry funkcji określają:

name (keyframename | none | initial | inherit)

Identyfikator funkcji, która ma zostać wywołana po uruchomieniu animacji.

duration (time | initial | inherit)

Czas trwania pojedynczego, pełnego cyku animacji.

timing-function (linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit)

Funkcja określająca szybkość animacji w poszczególnych jej krokach, na przykład:

  • stała prędkość podczas całej animacji (linear),
  • wolne rozpoczęcie, następnie przyspieszenie i zwolnienie przed końcem animacji (ease),
  • powolne rozpoczęcie, szybkie zakończenie (ease-in),
  • szybkie rozpoczęcie, powolne zakończenie (ease-out),
  • wolne rozpoczęcie i zakończenie, szybki środek animacji (ease-in-out),

delay (time | initial | inherit)

Opóźnienie – czas, jaki musi upłynąć przed rozpoczęciem animacji.

iteration-count (number | infinite | initial | inherit)

Liczba określająca ile razy animacja ma się wykonać.

direction (normal | reverse | alternate | alternate-reverse | initial | inherit)

Sposób wykonania animacji, na przykład:

  • standardowo – od początku do końca (normal),
  • odwrotnie – od końca do początku (reverse),
  • naprzemiennie – od początku do końca, a potem od końca do początku (alternate),
  • naprzemiennie odwrotnie – od końca do początku, a potem od początku do końca (alternate-reverse).

fill-mode (none | forwards | backwards | both | initial | inherit)

Parametr określa co ma się stać z animacją, gdy zostanie ona ukończona, na przykład:

  • ma wrócić do stanu początkowego (backwards),
  • ma przejść do stanu w którym się zakończyła (forwards).

play-state (paused | running | initial | inherit)

Parametr definiuje aktualny stan animacji, na przykład:

  • działająca (running)
  • wstrzymana (paused)

Dla tak przygotowanej właściwości animation, należy zdefiniować funkcję @keyframes name, która będzie określać stan obiektu w poszczególnych krokach animacji. Na przykład:

@keyframes rainbow {

	0% {
		background-color: red;
	}
	10% {
		background-color: orange;
	}
	20% {
		background-color: yellow;
	}
	30% {
		background-color: lime;
	}
	40% {
		background-color: green;
	}
	50% {
		background-color: cyan;
	}
	60% {
		background-color: blue;
	}
	70% {
		background-color: purple;
	}
	80% {
		background-color: violet;
	}
	90% {
		background-color: pink;
	}
	100% {
		background-color: red;
	}

}

Przedstawiona powyżej funkcja animacji będzie zmieniać tło wskazanego obiektu w kolejnych jednostkach czasu.

Bieżący artykuł „Animacje CSS – jak skutecznie animować obiekty HTML” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: .

Poniżej przedstawiono przykłady wykorzystania animacji CSS na stronach internetowych w postaci preloaderów, czyli animacji symulujących wczytywanie się strony internetowej.

Przykład 7

Przechodząc do praktycznych przykładów animacji CSS przedstawiono preloader, który wykorzystując zmianę właściwości box-shadow obiektu, imituje proces wczytywania się strony internetowej.

Przykład 8

Bazując na poprzednim przykładzie do animacji dodano transformację transform: rotate(angle) obracającą obiekt wokół własnej osi oraz dodatkowo, stałe wcześniej piksele zamieniono na jednostkę em ułatwiającą modyfikację rozmiaru preloadera. Wartości cienia w poszczególnych krokach dostosowano do potrzeb bieżącej animacji.

Przykład 9

W ostatnim przykładzie do animacji wykorzystano selektory :before:afeter oraz dodano opóźnienie animacji animation-delay, które powoduje nierównomierne zmiany właściwości obiektu.

← Poprzedni artykuł

Następny artykuł →

Komentarze: 1

  1. Max

    Max

    17 stycznia 2016 o 18:05

    Dobry tutorial. Polecam.

    Odpowiedz

Komentuj

Twój adres email nie zostanie opublikowany. Służyć będzie tylko i wyłącznie w celu udzielenia odpowiedzi na zadane pytanie lub komentarz. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *.