月亮升起和月亮落下动画 css

Question

好吧，我想制作一个简单的月亮动画，月亮从左上角升起（如日出），月亮落下（如日落）到右上角

我解决了第一步，但是当我运行浏览器中的代码月亮转到右上角但是当我向右滚动时，第二步（月亮设置到右上角）非常混乱我还能看到月亮

解决方法是什么？

mountain image

moon image

output image

注意：简单的解释会更好

*{
    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>

Answer 1

在左边放一个百分比，这个用来衡量屏幕的大小，应该够了。

*{
    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>

Answer 2

最简单的方法是添加

“overflow-x：隐藏”到样式表中的正文选择器。

body {
  overflow-x: hidden;

}

隐藏溢出基本上意味着如果边缘上有东西越界的元素，它是隐藏的而不是显示滚动条。

我还建议在您的动画中，将 left: 100% 更改为稍高的值，例如 110%，以确保在动画结束时它完全离开页面。

月亮升起和月亮落下动画 css

moon-rise and moon-set animation css

html

css

css-animations