Skróty animacje

Jeden ruch skarabeusza opisany osobnymi właściwościami to nawet osiem linijek: nazwa, czas, tempo, opóźnienie, powtórzenia, kierunek, wypełnienie i stan. Przy kilku animacjach arkusz rośnie jak stos zwojów w skryptorium. W CSS możemy używać skrótów do definiowania wielu właściwości animacji naraz. Skrót animacji pozwala zdefiniować różne aspekty animacji w jednej linii, co czyni 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, który wykorzystuje wszystkie osiem części naraz:

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).

Kolejność wartości

Przeglądarka rozpoznaje większość wartości po ich typie, ale dwie reguły są żelazne. Pierwsza wartość czasu to zawsze czas trwania, a druga to opóźnienie. Nazwa animacji nie powinna brzmieć jak słowo kluczowe, na przykład infinite, bo przeglądarka potraktuje ją jak to słowo. Nie wszystkie właściwości muszą być zdefiniowane i możesz pominąć niektóre z nich, ale pominięte wracają do wartości domyślnych. Stąd klasyczna pułapka: animation: slide bez czasu trwania trwa 0s i niczego nie pokaże. Moja rada: pisz wartości zawsze w porządku z listy powyżej, jak w najczęstszym zapisie animation: pulse 2s ease-in-out infinite.

Tryb wypełnienia

Część both z przykładu to tryb wypełnienia, który mówi, co element pokazuje przed startem i po końcu animacji. Domyślne none zostawia zwykłe style, forwards zatrzymuje element w ostatniej klatce, backwards pokazuje pierwszą klatkę już w czasie opóźnienia, a both łączy oba zachowania:

1@keyframes rise {
2  from { opacity: 0; transform: translateY(40px); }
3  to { opacity: 1; transform: translateY(0); }
4}
5
6.scarab {
7  animation: rise 2s ease-out 1s both;
8}

Przez pierwszą sekundę skarabeusz jest niewidoczny i obniżony, bo both działa jak backwards. Po dwóch sekundach ruchu zostaje w klatce to, bo działa jak forwards. Z wartością none mignąłby przed startem, a po końcu wróciłby do zwykłych stylów.

Pauza bez resetu

Część paused należy do animation-play-state, które pozwala wstrzymać animację. W przykładzie ze składnią animacja startuje zatrzymana, ale częściej pauzę włącza się po najechaniu kursorem:

1.scarab:hover {
2  animation-play-state: paused;
3}

Animacja zamiera w bieżącej klatce, a po zdjęciu kursora rusza dalej z tego samego miejsca, zamiast zaczynać od początku.

Przykład

Oto bardziej szczegółowy przykład skrótu animacji, tym razem wraz z regułą @keyframes:

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ę o 100 pikseli w prawo i z powrotem, w nieskończoność, z efektem ease-in-out. Opóźnienie 0s można pominąć, bo to wartość domyślna.

Wiele animacji naraz

Jeden element może mieć kilka animacji jednocześnie. Oddzielasz je przecinkami, a każda dostaje własny komplet wartości:

1.eye-of-horus {
2  animation: fadeIn 2s ease, slide 1s linear;
3}

Obie animacje ruszają razem, każda według własnych @keyframes i własnego czasu. Gdy dwie zmieniają tę samą właściwość, na przykład transform, wygrywa ta, która stoi dalej na liście.

Gdy animacja nie rusza

Gdy nic się nie dzieje, sprawdź po kolei: czy reguła @keyframes istnieje, czy nazwa w animation pasuje do niej co do litery, czy czas trwania jest większy od zera i czy element jest widoczny, bo przy display: none animacja w ogóle nie działa. Na koniec zajrzyj do panelu animacji w narzędziach deweloperskich przeglądarki.

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. W kolejnych lekcjach wejdziesz wyżej po drabinie: od prostych animacji z from i to, przez kroki procentowe i wiele właściwości naraz, po sekwencje z opóźnieniami i sceny 3D z perspective.

W edytorze poniżej czeka nocne niebo nad piramidami. Odkomentuj przy gwiazdach skrót animation: twinkle 1.5s ease-in-out infinite, zdefiniuj @keyframes twinkle według podpowiedzi w komentarzach i nadaj każdej gwieździe inne opóźnienie.

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #0a0a2e, #1a1a4e, #0d0d3a);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: white;
15}
16
17.night-sky {
18  text-align: center;
19  padding: 20px;
20  width: 100%;
21  max-width: 500px;
22}
23
24h2 {
25  margin-bottom: 30px;
26  color: #f0e68c;
27}
28
29.stars-container {
30  position: relative;
31  height: 200px;
32}
33
34.star {
35  position: absolute;
36  font-size: 24px;
37  color: #fffacd;
38  /* Dodaj animacje twinkle do kazdej gwiazdy */
39  /* animation: twinkle 1.5s ease-in-out infinite; */
40}
41
42.star-1 { top: 20px; left: 10%; }
43.star-2 { top: 50px; left: 60%; }
44.star-3 { top: 10px; left: 40%; }
45.star-4 { top: 80px; left: 80%; }
46.star-5 { top: 60px; left: 25%; }
47
48/* Dodaj rozne animation-delay dla kazdej gwiazdy */
49/* .star-1 { animation-delay: 0s; } */
50/* .star-2 { animation-delay: 0.3s; } */
51/* .star-3 { animation-delay: 0.6s; } */
52/* .star-4 { animation-delay: 0.9s; } */
53/* .star-5 { animation-delay: 1.2s; } */
54
55/* Zdefiniuj @keyframes twinkle */
56/* 0%, 100% { opacity: 0.3; transform: scale(0.8); } */
57/* 50% { opacity: 1; transform: scale(1.2); } */
58
59.pyramids-silhouette {
60  font-size: 48px;
61  color: #2d1b4e;
62  letter-spacing: 20px;
63  margin-top: 20px;
64}
65
66.hint {
67  margin-top: 20px;
68  color: #aaa;
69  font-style: italic;
70}

Pamiętaj: skrót animation to kartusz faraona, czyli jedna ramka, która mieści całe imię, o ile znaki stoją w czytelnym porządku.