CSS animacje

CSS animacje

CSS może realizować animacje elementów HTML bez użycia JavaScript lub Flash!

CSS

W tym rozdziale nauczysz się takich właściwości:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Wsparcie przeglądarek dla animacji

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Właściwość Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Co to jest animacja CSS?

Animacja powoduje, że element stopniowo przechodzi od jednego stylu do innego.

Możesz dowolnie zmieniać dowolną liczbę atrybutów CSS.

Aby użyć CSS animacji, musisz najpierw określić kilka kluczowych ramek dla animacji.

Kluczowe ramy zawierają style, które element ma w określonym momencie.

@keyframes zasady

Jeśli w @keyframes Zasady określają CSS style, które będą stopniowo zmieniać się w określonym czasie z bieżącego stylu na nowy styl.

Aby animacja działała, musi być przypisana do jakiegoś elementu.

Poniższy przykład przypisuje animację "example" do elementu <div>. Animacja będzie trwała 4 sekundy, a kolor tła elementu <div> będzie stopniowo zmieniał się z "red" na "yellow":

Przykład

/* Kody animacji */
@keyframes example {
  from {background-color: red;}
  do {background-color: yellow;}
}
/* Apply animation effect to this element */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Spróbuj sam!

Uwaga:animation-duration Atrybut definiuje, jak długo trwa animacja. Jeśli nie określono animation-duration Jeśli nie określisz wartości dla atrybutu, animacja nie zostanie uruchomiona, ponieważ domyślna wartość to 0s (0 sekund).

W powyższym przykładzie, poprzez użycie słów kluczowych "from" i "to" (representujących 0% (rozpoczęcie) i 100% (zakończenie)), ustawiliśmy, kiedy zmienia się styl.

Możesz również używać wartości procentowych. Dzięki użyciu procentów, możesz dodać dowolną liczbę zmian stylu według potrzeb.

Poniższy przykład zmieni kolor tła elementu <div> po ukończeniu animacji w 25%, 50% oraz po ukończeniu animacji w 100%:

Przykład

/* Kody animacji */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Elementy, na które aplikowana jest animacja */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Spróbuj sam!

Poniższy przykład zmieni kolor tła i pozycję elementu <div> w 25%, 50% oraz 100% ukończenia animacji:

Przykład

/* Kody animacji */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Elementy, na które aplikowana jest animacja */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Spróbuj sam!

Opóźnienie animacji

animation-delay Atrybut określa czas opóźnienia zanim animacja rozpocznie się odtwarzanie.

Poniższy przykład ma 2-sekundowy opóźnienie przed rozpoczęciem animacji:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Spróbuj sam!

Dopuszczalne są wartości ujemne. Jeśli używa się wartości ujemnych, animacja będzie rozpoczynać się, jakby była już odtwarzana przez N sekund.

W poniższym przykładzie, animacja będzie rozpoczynać się, jakby już była odtwarzana przez 2 sekundy:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Spróbuj sam!

Ustawienie liczby razy, przez które animacja powinna być uruchomiona

animation-iteration-count Atrybut określa, ile razy animacja powinna być uruchomiona.

Poniższy przykład uruchamia animację 3 razy przed zatrzymaniem:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Spróbuj sam!

Poniższy przykład używa wartości "infinite", aby animacja trwała wiecznie:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Spróbuj sam!

Odtwarzanie animacji w przeciwnym kierunku lub cykliczne

animation-direction Atrybut określa, czy animacja ma być odtwarzana w kierunku przedniego, tylnego czy w sposób cykliczny.

animation-direction Atrybut akceptuje następujące wartości:

  • normal - Odtwarzanie animacji w normalnym kierunku (przedni). Domyślna wartość
  • reverse - Odtwarzanie animacji w przeciwnym kierunku (tylnym)
  • alternate - Odtwarzanie animacji najpierw w kierunku przedniego, a następnie w kierunku tylnego
  • alternate-reverse - Odtwarzanie animacji najpierw w kierunku tylnym, a następnie w kierunku przedniego

Poniższy przykład będzie odtwarzał animację w przeciwnym kierunku (tylnym):

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Spróbuj sam!

Poniższy przykład używa wartości "alternate", aby animacja najpierw działała w kierunku przedniego, a następnie w kierunku tylnego:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Spróbuj sam!

Poniższy przykład używa wartości "alternate-reverse", aby animacja najpierw działała w kierunku tylnym, a następnie w kierunku przedniego:

Przykład

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Spróbuj sam!

Określa krzywą prędkości animacji

animation-timing-function Atrybut określa krzywą prędkości animacji.

animation-timing-function Atrybut akceptuje następujące wartości:

  • ease - Określ animację, która zaczyna się wolno, potem przyspiesza, a następnie znów zwalnia (domyślna)
  • linear - Określ animację, w której prędkość od początku do końca jest taka sama
  • ease-in - Określ animację, która zaczyna się wolniej
  • ease-out - Określ animację, która kończy się wolniej
  • ease-in-out - Określ animację, która zaczyna się i kończy wolniej
  • cubic-bezier(n,n,n,n) - Uruchom swoje wartości zdefiniowane w funkcji trójstopniowego bezyjścia

Poniższe przykłady pokazują różne krzywe prędkości, które można użyć:

Przykład

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Spróbuj sam!

Określa tryb wypełniania animacji

CSS animacje nie wpływają na element przed odtworzeniem pierwszej kluczowej klatki ani po odtworzeniu ostatniej kluczowej klatki.animation-fill-mode atrybut może nadpisać to zachowanie.

Gdy animacja nie jest odtwarzana (przed rozpoczęciem, po zakończeniu, lub obu przypadkach),animation-fill-mode Atrybut określa styl elementu docelowego.

Atrybut animation-fill-mode akceptuje następujące wartości:

  • none - Domyślna wartość. Animacja nie aplikuje żadnych stylów na element przed lub po jej wykonaniu.
  • forwards - Element zachowa wartości stylu ustawione przez ostatnią kluczową klatkę (zależne od animation-direction i animation-iteration-count).
  • backwards - Element uzyska wartości stylu ustawione przez pierwszą kluczową klatkę (zależne od animation-direction) i zachowa tę wartość w czasie opóźnienia animacji.
  • both - Animacja będzie przestrzegać zarówno zasad wstecznego, jak i przodowego, rozszerzając właściwości animacji w obu kierunkach.

Poniższy przykład pokazuje, jak element <div> zachowuje wartości stylu z ostatniego kluczowego klatki po zakończeniu animacji:

Przykład

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Spróbuj sam!

Poniższy przykład sprawia, że element <div> otrzymuje wartość stylu z pierwszej kluczowej klatki przed rozpoczęciem animacji (w okresie opóźnienia):

Przykład

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Spróbuj sam!

Poniższy przykład sprawia, że element <div> otrzymuje wartość stylu z pierwszego kluczowego klatki, zanim animacja się rozpocznie, oraz zachowuje wartość stylu z ostatniej kluczowej klatki po zakończeniu animacji:

Przykład

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Spróbuj sam!

Skrócona właściwość animacji

Poniższy przykład używa sześciu atrybutów animacji:

Przykład

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Spróbuj sam!

Używając skróconej wersji animation Atrybuty mogą również osiągnąć taki sam efekt animacji jak w poprzednim przykładzie:

Przykład

div {
  animation: example 5s linear 2s infinite alternate;
}

Spróbuj sam!

Atrybuty animacji CSS

Poniższa tabela pokazuje reguły @keyframes oraz wszystkie atrybuty animacji CSS:

Właściwość Opis
@keyframes Określa tryb animacji.
animation Ustawia skróconą wersję wszystkich właściwości animacji.
animation-delay Określa opóźnienie rozpoczęcia animacji.
animation-direction Określa, czy animacja ma być odtwarzana do przodu, do tyłu, czy w obie strony.
animation-duration Określa czas, który animacja powinna spędzić na jednej cyklu.
animation-fill-mode Określa styl elementu, gdy animacja nie jest odtwarzana (przed rozpoczęciem, po zakończeniu, lub oba naraz).
animation-iteration-count Określa liczbę razy, na które animacja ma być odtwarzana.
animation-name Określa nazwę animacji @keyframes.
animation-play-state Określa, czy animacja ma być uruchamiana czy zatrzymywana.
animation-timing-function Określa prędkość kształtu animacji.