Wszystko we wszechświecie ma swój odpowiednik. Mamy kolor czarny i biały, jest ciepłe i zimne, jest dziura i korek. Wszystko jest binarne i nie może istnieć bez swojego odpowiednika. Czy tworząc animację z jedną klatką uzyskamy jakiś efekt? Co będzie stanowić tą jedną klatkę?
Poszukajmy drugiej połówki.
Spróbujmy sprawdzić co się stanie z tekstem, jeśli nadamy mu własnie taką animację.
<p>Tu jest jakiś tekst</p>
+
p {
animation: 1s kolor ease infinite;
}
@keyframes kolor {
100% {
color: #f00;
}
}
Może się wydawać, że skoro ustawiliśmy kolor czerwony dla ostatniej fazy animacji, to kolor tekstu nie będzie się zmieniał. Ale przecież w klatce z zerowym postępem nie ustawiliśmy żadnego koloru, i na pewno nie jest to kolor czerwony. Skąd więc animacja pobierze kolor startowy? Pobierze go z elementu. Ale ten również nie ma ustawionego koloru... Co prawda nie ma ustawionego "dosłownie", ale domyślnie tekst ma kolor czarny. Animacja będzie wyglądać tak:
Co prawda powyższy przykład możemy zastąpić transition, ale to tylko... przykład. Spróbujmy z czymś trudniejszym. Chcemy zrobić animację bijącego serca. Potrzebujemy:
<div class="serce"></div>
+
.serce {
background: #f00;
width: 50px;
height: 50px;
transform: rotate(-45deg);
position: relative;
margin: 20px;
}
.serce:before,
.serce:after {
content: '';
background: inherit;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: -50%;
left: 0;
}
.serce:before {
top: 0;
left: 50%;
}
Tak będzie wyglądać statyczne serce:
Dodajmy teraz animację:
.serce {
/* poprzednie właściwości + animacja */
animation: 1s bicie ease infinite;
}
@keyframes bicie{
0%,100%{
transform: rotate(-45deg) scale(1);
}
50%{
transform: rotate(-45deg) scale(1.5);
}
}
W animacji transformujemy również wartość obrotu, bo gdybyśmy jej tu nie umieścili, to animacja zresetowałaby ją na 0deg.
Efekt jest taki:
Czy możemy poruszyć serce kulturysty?
Jak widać w animacji użyte są trzy klatki: 0%, 50% oraz 100%. A jak taką animację sprowadzić do jednoklatkowej? Postępując analogicznie do pierwszego przykładu, wystarczy nadać właściwości z klatek 0% oraz 100% samemu elementowi. Rotacja była już dodana, a skali nie musimy, bo element domyślnie ma skalę 1.
@keyframes bicie{
50%{
transform: rotate(-45deg) scale(1.5);
}
}
Ten prosty trick możesz stosować wszędzie tam, gdzie pierwsza i ostatnia klatka animacji zawiera właściwości o wartościach takich jakie ma nadane element - czyli nie powtarzać ich. W ten sposób z każdej animacji wieloklatkowej można ewentualnie pozbyć się jednej (pierwszej lub ostatniej) lub dwóch klatek (pierwszej i ostatniej).
Mam nadzieję, że po dzisiejszym wpisie nie będziesz w pocie czoła wykrzykiwał: "To był niezły wycisk!". Jakby nie było, następny będzie mniej absorbujący mięśnie.