Skróty animacje

W CSS, możemy używać skrótów do definiowania wielu właściwości animacji naraz. Skrót animacji pozwala na zdefiniowanie różnych aspektów animacji w jednej linii, co może uczynić kod bardziej zwięzłym i czytelnym.

Właściwość animation

Właściwość animation jest skrótem, który łączy następujące właściwości:

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

Składnia

Poniżej znajduje się składnia właściwości animation, z przykładem:

1.animation-example {
2  animation: slide 3s ease-in 1s 2 alternate both paused;
3}

Ten skrót można podzielić na odpowiednie części:

• slide: nazwa animacji (odpowiada animation-name).
• 3s: czas trwania animacji (odpowiada animation-duration).
• ease-in: funkcja tempa animacji (odpowiada animation-timing-function).
• 1s: opóźnienie animacji (odpowiada animation-delay).
• 2: liczba powtórzeń animacji (odpowiada animation-iteration-count).
• alternate: kierunek animacji (odpowiada animation-direction).
• both: tryb wypełnienia animacji (odpowiada animation-fill-mode).
• paused: stan odtwarzania animacji (odpowiada animation-play-state).

Uwagi

• Wartości muszą występować w określonej kolejności, aby były prawidłowo interpretowane.
• Nie wszystkie właściwości muszą być zdefiniowane; możesz pominąć niektóre z nich, ale wartości muszą być podane w prawidłowej kolejności.

Przykład

Oto bardziej szczegółowy przykład skrótu animacji:

1@keyframes slide {
2  0% { transform: translateX(0); }
3  100% { transform: translateX(100px); }
4}
5
6.slide-element {
7  animation: slide 2s ease-in-out 0s infinite alternate;
8}

Element z klasą slide-element będzie przesuwał się w lewo i prawo w nieskończoność, z efektem ease-in-out.

Skróty animacji w CSS pozwalają na zdefiniowanie wielu właściwości animacji w jednej linii, co ułatwia zarządzanie kodem i jego czytanie. Wykorzystanie właściwości animation może znacznie przyspieszyć proces tworzenia złożonych animacji, zachowując przy tym klarowność kodu.