moon-rise and moon-set animation css

Issue

well I want to make a simple moon animation which the moon-rise ( like sun-rise) from top left and moon-set ( like sun-set ) to top right

I solve the first step but the second step ( moon-set to top right ) is so confusing when I run the code in browser the moon went to the top right but when I scroll to the right I still can see the moon

what is the solution?

mountain image

moon image

output image

note: Simple explanations would be better

*{
    box-sizing: border-box;

}

@keyframes move{

    from{left:-250px; }
    to{left: 100%;}
}

body {

    
    background-image: url("https://i.stack.imgur.com/ZO2wI.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

img{

    width: 150px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    animation-name: move;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    transform: translateX(250)
    
}
<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta charset="UTF-8">
    <meta name="viewport>" content="width=device-width, intital-scale=1.0">
    
    <title> Animated Moon </title>

    <link rel="stylesheet" href="style.css">



</head>


<body>

    

 <header>

    <img src="https://i.stack.imgur.com/M1OFe.png">

 </header>



</body>



</html>

Solution

The simplest way you can do this would be to add

"overflow-x: hidden" to your body selector in your stylesheet.

body {
  overflow-x: hidden;

}

hiding the overflow basically means that if something goes out of bounds on the edge
of the element, it is hidden instead of showing scroll bars.

I would also suggest that in your animation, change left: 100% to something slightly higher like 110% just to make sure it’s completely off the page when the animation ends.

Answered By – MikoFrosty

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.