移动在弯曲的道路的例证

Question

我需要像这样在弯曲的路径上移动插图图像。

我尝试使用transform：translateX，但是我重新认识到它无济于事，因为它显示了直接移动。这是我的代码。

＆＃13;

＆＃13;

.sun-half-wrapper {
  position: relative;
}

.sun-half {
  position: absolute;
  width: 10.5%;
  top: 12%;
  left: 13.5%;
  animation: sun 5s linear infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.sun-half img {
  width: 100%;
}
            
@keyframes sun {
  from {
    transform: translateX(10px); 
  }
  to {
    transform: translateX(500px);
  }
}

＆＃13;

<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" style="">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

任何解决方案？这是一个jsfiddle如何使用transform-origin属性？

Answer 1

您可以组合两个动作：图像向右移动，容器向上移动：

＆＃13;

＆＃13;

.sun-half-wrapper {
  position: relative;
  height:80vh
}

.sun-half {
  position: absolute;
  right:0;
  left:0;
  animation: sun 5s ease-in-out  infinite;

}

.sun-half img {
  animation: image 5s ease-in-out infinite;

}
            
@keyframes sun {
  0% {
    bottom:0; 
  }
  50% {
    bottom:80px;
  }
  100% {
    bottom:0px;
  }
}
@keyframes image {
  0% {
    margin-left:0; 
  }
  100% {
    margin-left:50%;
  }

}

＆＃13;

<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="https://lorempixel.com/100/100/" alt="logo" style="">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者没有position:absolute的情况，只需更改保证金：

＆＃13;

＆＃13;

.sun-half {
  animation: sun 5s ease-in-out  infinite;
  margin-top:20%;

}

.sun-half img {
  animation: image 5s ease-in-out infinite;

}
            
@keyframes sun {
  0% {
    margin-top:20%; 
  }
  50% {
    margin-top:5%;
  }
  100% {
    margin-top:20%;
  }
}
@keyframes image {
  0% {
    margin-left:0; 
  }
  100% {
    margin-left:50%;
  }

}

＆＃13;

<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="https://lorempixel.com/100/100/" alt="logo" style="">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;