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?
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>CodePudding user response：
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.
CodePudding user response：
In to left put a percentage, this takes as a measure the size of the screen, it should be enough.
*{
box-sizing: border-box;
}
@keyframes move{
from{left:-250px; }
to{left: 80%;}
0%,100% {opacity: 0.2;}
30%, 80% {opacity: 1;}
}
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>