Szybkie Kurski - Darmowe kursy technologiczne

1.

Co robi właściwość transition w CSS?

Pozwala płynnie zmieniać wartości właściwości przy ich zmianie

Obraca element w miejscu

Zmienia kolor elementu na stałe

Tworzy złożone sekwencje animacji

2.

Które z poniższych określeń nie jest typową funkcją transition-timing-function?

linear

ease

cubic-bezier

rotate

3.

Jak definiujemy animację kluczową w CSS?

@animate nazwa { start {} end {} }

@transition nazwa { from {} to {} }

@keyframes nazwa { from {} to {} }

@motion nazwa { 0% {} 100% {} }

4.

Która właściwość CSS pozwala ustawić liczbę powtórzeń animacji?

animation-iteration-count

animation-duration

animation-timing-function

animation-fill-mode

5.

Jaką wartość animation-fill-mode należy ustawić, aby element pozostał w stanie końcowym animacji?

none

forwards

backwards

both

6.

Która transformacja w CSS obraca element?

scale

rotate

skew

translate

7.

Jak połączyć kilka transformacji, np. przesunięcie, skalowanie i obrót?

transform: translateX(50px), scale(1.2), rotate(30deg);

transform: translateX(50px) scale(1.2) rotate(30deg);

transition: translateX(50px) scale(1.2) rotate(30deg);

animation: translateX(50px) scale(1.2) rotate(30deg);

8.

Co się stanie w poniższym przykładzie? .card { transition: transform 0.3s ease; } .card:hover { transform: scale(1.05); }

Element zmieni kolor

Element od razu powiększy się o 5%

Element powiększy się o 5% płynnie po najechaniu

Element zostanie przesunięty

9.

Jak zrobić animację „pulsującego przycisku”, który powiększa się i zmniejsza w pętli?

transition: scale 1.1 infinite;

@keyframes pulse { 0%,100% { scale(1); } 50% { scale(1.1); } }

@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

transform: pulse infinite;

10.

Która właściwość pozwala przesunąć element w osi X i Y?

rotate

scale

translate

skew

Animacje i przejścia