eclipse animation
Lesson 9 of 10 in Coddy's Solar Eclipse Animation | HTML/CSS Project course.
Challenge
EasyIn the CSS file, create an animation using @keyframes:
- Name the animation "eclipse-animation".
- Add three keyframes-selector's which are
0%,50%and100%. Add css-styles in 0% keyframes-selector:
1.Set box-shadow to
none.2.Set transform to
translate(-30px, 30px) scale(0.9).Add css-styles in 50% keyframes-selector:
1.Set transform to
translate(0px, 0px) scale(1.02).2.Set box-shadow to
0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.3.Set background-color to
#efdbd8.Add css-styles in 100% keyframes-selector:
1.Set transform to
translate(30px, -30px) scale(0.9).2.Set box-shadow to
none.
If you are not sure, refer to the hint. After this step you will see the moon moving!
If it's not moving - refer to the solution…
Try it yourself
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>