Obróć to!

Lekcja 4 z 6 w kursie Projekt CSS — prosty wskaźnik ładowania w Coddy.

Aby tworzyć animacje wyłącznie za pomocą CSS, użyjemy keyframes z następującą składnią

@keyframes animation_name {
	from {
		...
	}
	to {
		...
	}
}

Zwróć uwagę na animation_name, czyli nazwę animacji (można ją zmienić). W bloku from i to należy umieścić zmiany właściwości CSS, na przykład:

@keyframes fade_out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

Powyższy kod utworzy animację zmieniającą opacity z 1 na 0.

Aby dodać powyższą animację do konkretnego elementu, użyj na przykład:

#spinner {
	animation: fade_out 1.3s infinite;
}

Powyższy kod doda animację fade_out do elementu #spinner, z czasem trwania 1.3 sekundy; animacja będzie uruchamiana w nieskończoność.

Wyzwanie

Łatwy

Użyj keyframes, aby animować obrót elementu #spinner.

Animacja powinna trwać 1.5 sekundy i powtarzać się w nieskończoność.

Nadaj animacji dowolną nazwę

Jeśli nie wiesz, jak animować obrót, sprawdź podpowiedź.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

Wszystkie lekcje w sekcji Projekt CSS — prosty wskaźnik ładowania

1Wprowadzenie

2Projekt CSS

Obróć to!

Poćwicz samodzielnie: Edytor online Web