אנימציית ליקוי

שיעור 9 מתוך 10 בקורס אנימציית ליקוי חמה | פרויקט HTML/CSS של Coddy.

אתגר

קל

בקובץ CSS, צרו אנימציה באמצעות @keyframes:

תנו לאנימציה את השם "eclipse-animation".
הוסיפו שלושה בוררי keyframes: 0% , 50% ו-100%.
הוסיפו סגנונות CSS בבורר keyframes של 0%:
1. הגדירו את box-shadow ל-none.
2. הגדירו את transform ל-translate(-30px, 30px) scale(0.9).
הוסיפו סגנונות CSS בבורר keyframes של 50%:
1. הגדירו את transform ל-translate(0px, 0px) scale(1.02).
2. הגדירו את box-shadow ל-0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.
3. הגדירו את background-color ל-#efdbd8.
הוסיפו סגנונות CSS בבורר keyframes של 100%:
1. הגדירו את transform ל-translate(30px, -30px) scale(0.9).
2. הגדירו את box-shadow ל-none.

אם אינכם בטוחים, היעזרו ברמז. לאחר השלב הזה תראו את הירח נע!

אם הוא לא נע - היעזרו בפתרון…

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>