Przejścia (Transitions) i Animacje

Na nowszych arkuszach INF.03 (szczególnie w erze odejścia od jQuery na rzecz czystego JS i CSS) CKE wymaga znajomości ożywiania elementów (np. podświetlające się paski menu).

Przejścia (transition)

Gdy bez animacji najeżdżasz na element:

button { background-color: blue; }
button:hover { background-color: red; }

Przycisk zmieni się na czerwony natychmiast, w ułamku sekundy. Aby uczynić to płynnym (przyjemnym dla oka), używamy transition.

button {
    background-color: blue;
    /* Magiczna funkcja, opóźnia i płynnie przelicza klatki: */
    transition: background-color 0.5s ease-in-out;
}

Pułapka CKE 🪤: Czasem CKE nakazuje "Dodaj płynne przejście podczas najechania myszką trwające 1 sekundę". Regułę transition dodajemy ZAWSZE do elementu w stanie pierwotnym (czyli do .button), a nie do .button:hover! Gdy dodasz do hover, animacja zadziała przy najechaniu, ale "urwie się" bezpowrotnie przy zjechaniu kursorem!

Transformacje (transform)

Przejściami możemy zmienić płynnie każdy "prosty" wymiar i kolor (szerokość, margines, tło). Ale żeby obrócić zdjęcie, lub powiększyć je (nie psując reszty układu strony), używamy transform.

• transform: scale(1.2); – Powiększa element do 120%.
• transform: rotate(45deg); – Obraca element o 45 stopni w prawo.
• transform: translate(20px, 50px); – Przesuwa element o 20px w prawo i 50px w dół (wizualnie, ale w HTML traktuje go tak, jakby stał w oryginalnym miejscu!).

.zdjecie {
    transition: transform 0.3s;
}
.zdjecie:hover {
    transform: scale(1.1) rotate(5deg); /* Powiększa się i lekko obraca */
}

Animacje Kluczowe (@keyframes)

Jeśli potrzebujesz czegoś, co będzie pulsować nieustannie (nawet jak nikt nie najeżdża myszką), potrzebujesz keyframes. Wyobraź sobie montowanie filmu na osi czasu:

/* Tworzymy oś czasu o nazwie 'puls' */
@keyframes puls {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); } /* W połowie czasu powiększ */
    100% { transform: scale(1); }  /* Wróć do stanu domyślnego */
}

/* Przypinamy ją do obiektu */
.reklama {
    /* nazwa, czas trwania, zachowanie na końcu, nieskończoność powtórzeń */
    animation: puls 2s ease-in-out infinite; 
}

Animacje i przejścia pokazują sprawdzającemu egzaminatorowi, że doskonale operujesz frontendem. Jeśli w arkuszu widzisz wytyczne o efektach wizualnych – wiesz, co robić!