Animacje CSS

Animacje CSS

CSS umożliwia animację elementów HTML bez użycia JavaScript lub Flash!

W tym rozdziale poznasz następujące właściwości:

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

Obsługa przeglądarek dla animacji

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

Co to są animacje CSS?

Animacja pozwala elementowi stopniowo zmieniać się z jednego stylu na inny.

Możesz zmienić tyle właściwości CSS, ile chcesz, tyle razy, ile chcesz.

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

Klatki kluczowe zawierają style, które element będzie miał w określonych momentach.

Zasada @keyframes

Gdy określisz style CSS wewnątrz @keyframes reguły, animacja będzie stopniowo zmieniać się z bieżącego stylu na nowy w określonych momentach.

Aby animacja działała, musisz powiązać animację z elementem.

Poniższy przykład wiąże animację „przykład” z elementem <div>. Animacja potrwa 4 sekundy i stopniowo zmieni kolor tła elementu <div> z „czerwonego” na „żółty”:

Uwaga: Właściwość animation-durationokreśla, jak długo animacja powinna być ukończona. Jeśli animation-durationwłaściwość nie zostanie określona, ​​animacja nie zostanie wykonana, ponieważ wartość domyślna to 0s (0 sekund). 

W powyższym przykładzie określiliśmy, kiedy styl się zmieni, używając słów kluczowych „od” i „do” (co oznacza 0% (początek) i 100% (zakończenie)).

Możliwe jest również użycie procentu. Używając wartości procentowych, możesz dodać tyle zmian stylu, ile chcesz.

Poniższy przykład zmieni kolor tła elementu <div>, gdy animacja jest ukończona w 25%, w 50% i ponownie, gdy animacja jest ukończona w 100%:

Poniższy przykład zmieni zarówno kolor tła, jak i położenie elementu <div>, gdy animacja jest ukończona w 25%, w 50% i ponownie, gdy animacja jest ukończona w 100%:

Opóźnij animację

Właściwość animation-delayokreśla opóźnienie rozpoczęcia animacji.

Poniższy przykład ma 2 sekundy opóźnienia przed rozpoczęciem animacji:

Dopuszczalne są również wartości ujemne. Jeśli użyjesz wartości ujemnych, animacja rozpocznie się tak, jakby była odtwarzana przez N sekund.

W poniższym przykładzie animacja rozpocznie się tak, jakby była odtwarzana przez 2 sekundy:

Ustaw, ile razy animacja powinna być uruchamiana

Właściwość animation-iteration-countokreśla, ile razy animacja powinna zostać uruchomiona.

Poniższy przykład uruchomi animację 3 razy, zanim się zatrzyma:

W poniższym przykładzie użyto wartości „infinite”, aby animacja trwała wiecznie:

Uruchom animację w odwrotnym kierunku lub w cyklach alternatywnych

Właściwość animation-directionokreśla, czy animacja ma być odtwarzana w przód, wstecz czy w naprzemiennych cyklach.

Właściwość kierunek animacji może mieć następujące wartości:

• normal- Animacja jest odtwarzana normalnie (do przodu). To jest domyślne
• reverse - Animacja jest odtwarzana w odwrotnym kierunku (do tyłu)
• alternate - Animacja jest odtwarzana najpierw do przodu, potem do tyłu
• alternate-reverse - Animacja jest odtwarzana najpierw do tyłu, potem do przodu

Poniższy przykład uruchomi animację w odwrotnym kierunku (do tyłu):

W poniższym przykładzie użyto wartości „alternate”, aby animacja była uruchamiana najpierw do przodu, a następnie do tyłu:

W poniższym przykładzie użyto wartości „alternate-reverse”, aby animacja była uruchamiana najpierw do tyłu, a następnie do przodu:

Określ krzywą prędkości animacji

Właściwość animation-timing-functionokreśla krzywą prędkości animacji.

Właściwość animacja-timing-function może mieć następujące wartości:

• ease - Określa animację z powolnym startem, potem szybkim i powolnym zakończeniem (jest to ustawienie domyślne)
• linear - Określa animację z tą samą prędkością od początku do końca
• ease-in - Określa animację z powolnym startem
• ease-out - Określa animację z wolnym końcem
• ease-in-out - Określa animację z powolnym początkiem i końcem
• cubic-bezier(n,n,n,n)- Pozwala zdefiniować własne wartości w funkcji sześciennej-Beziera

Poniższy przykład pokazuje niektóre z różnych krzywych prędkości, których można użyć:

Określ tryb wypełniania dla animacji

Animacje CSS nie wpływają na element przed odtworzeniem pierwszej klatki kluczowej lub po odtworzeniu ostatniej klatki kluczowej. Właściwość animacja-fill-mode może zastąpić to zachowanie.

Właściwość animation-fill-modeokreśla styl elementu docelowego, gdy animacja nie jest odtwarzana (przed rozpoczęciem, po zakończeniu lub w obu przypadkach).

Właściwość animation-fill-mode może mieć następujące wartości:

• none- Domyślna wartość. Animacja nie zastosuje żadnych stylów do elementu przed ani po jego wykonaniu
• forwards- Element zachowa wartości stylu ustawione przez ostatnią klatkę kluczową (w zależności od kierunku animacji i licznika iteracji animacji)
• backwards - Element otrzyma wartości stylu ustawione przez pierwszą klatkę kluczową (w zależności od kierunku animacji) i zachowa je podczas okresu opóźnienia animacji
• both - Animacja będzie zgodna z zasadami zarówno do przodu, jak i do tyłu, rozszerzając właściwości animacji w obu kierunkach

Poniższy przykład pozwala elementowi <div> zachować wartości stylu z ostatniej klatki kluczowej po zakończeniu animacji:

Poniższy przykład pozwala elementowi <div> uzyskać wartości stylu ustawione przez pierwszą klatkę kluczową przed rozpoczęciem animacji (w okresie opóźnienia animacji):

Poniższy przykład pozwala elementowi <div> uzyskać wartości stylu ustawione przez pierwszą klatkę kluczową przed rozpoczęciem animacji i zachować wartości stylu z ostatniej klatki kluczowej po zakończeniu animacji:

Właściwość skrócona animacji

Poniższy przykład wykorzystuje sześć właściwości animacji:

Ten sam efekt animacji, jak powyżej, można uzyskać za pomocą animationwłaściwości skróconej:

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: ;
  : 2s;
}

@keyframes example {
  from {: red;}
  to {: blue;}
}
</style>

<body>
  <div>This is a div</div>
</body>

Właściwości animacji CSS

W poniższej tabeli wymieniono regułę @keyframes i wszystkie właściwości animacji CSS: