Bardzo szybki CSS – transition i opóźnienie animacji

To już podstawy podstaw animowania elementów, ale dla kronikarskiego obowiązku o tym wspominam. Tworzymy animację pseudo-klasą hover, która ma się wykonywać płynnie, z pewnym opóźnieniem – różnym dla każdej animowanej właściwości, jeżeli trzeba.

Animować będziemy nasz element <h1>:

<h1>My heading</h1>

Dodajemy style, w tym zmianę koloru po najechaniu myszą używając pseudo-klasę hover:

h1 {
  font-weight: bold;
 }

h1:hover {
  color:tomato;
}

Teraz nasza animacja co prawda się wykonuje, ale przejście jest natychmiastowe. Nie wygląda to dobrze w dzisiejszych czasach. Musimy nadać transition.

Transition nadajemy na elemencie animowanym i przekazujemy co jest animowane oraz jakiej długości spowolnienie ma animacja mieć. Ten kod spowolni wszystkie animacje elementu h1 do pół sekundy:

h1 {
 font-weight: bold;
 transition: all .5s;
}

Oczywiście nie ma potrzeby (ani nie jest to dobrą praktyką) podawać wszystkiego jako 'all’. Animujemy kolor, więc:

h1 {
  font-weight: bold;
  transition: color .5s;
}

Opcjonalnie możemy też podać rodzaj animacji:

h1 {
  font-weight: bold;
  transition: color .5s ease-in;
}

Oczywiście nasza animacja może animować wiele różnych rzeczy na raz:

h1:hover {
  color:tomato;
  letter-spacing: 2px;
 }

My zaś możemy różnym animowanym właściwościom ustalić różne opóźnienie oraz rodzaj animacji:

h1 {
 font-weight: bold;
 transition: color .5s ease-in, letter-spacing 2s ease-out;
}

No chyba, że nie robi nam to żadnej różnicy – wtedy możemy uciec się do all:

h1 {
 font-weight: bold;
 transition: all .5s ease-in;
}

Zawsze pamiętajmy – transition nadajemy na elemencie animowanym, nie zaś samej animacji.