moon-rise and moon-set animation css


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("");
    background-repeat: no-repeat;
    background-size: cover;


    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">
    <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">





    <img src="">





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.