animazione dell'eclissi

Lezione 9 di 10 del corso Animazione dell'eclissi solare | Progetto HTML/CSS di Coddy.

Sfida

Facile

Nel file CSS, crea un'animazione usando @keyframes:

Assegna all'animazione il nome "eclipse-animation".
Aggiungi tre selettori di fotogrammi chiave, ovvero 0% , 50% e 100%.
Aggiungi gli stili CSS nel selettore di fotogrammi chiave 0%:
1. Imposta box-shadow su none.
2. Imposta transform su translate(-30px, 30px) scale(0.9).
Aggiungi gli stili CSS nel selettore di fotogrammi chiave 50%:
1. Imposta transform su translate(0px, 0px) scale(1.02).
2. Imposta box-shadow su 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.
3. Imposta background-color su #efdbd8.
Aggiungi gli stili CSS nel selettore di fotogrammi chiave 100%:
1. Imposta transform su translate(30px, -30px) scale(0.9).
2. Imposta box-shadow su none.

Se non sei sicuro, consulta il suggerimento. Dopo questo passaggio vedrai la luna muoversi!

Se non si muove, consulta la soluzione…

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi il codice HTML qui -->
        <script src="script.js"></script>
    </body>
</html>