Lekcja 18: Płynne przejścia (Transitions)

Wprowadzenie:
Nikt nie lubi, gdy elementy na stronie „migają” gwałtownie. Dzięki transition sprawisz, że zmiana koloru po najechaniu myszką czy powiększenie zdjęcia odbędzie się płynnie. To najprostszy sposób na ożywienie interfejsu.

Kluczowe zagadnienia:

  • Właściwość transition.
  • Czas trwania animacji (duration).
  • Funkcja czasu (easelinear).

Sprawdź wiedzę (Pytania do filmu):

  1. Co robi transition?
  2. Co oznacza 0.3s?
  3. Jaka właściwość jest wymagana do działania transition?
  4. Czy transition działa na display: none?
  5. Gdzie wpisujemy transition (w hover czy base)?