CSS - Animate object in curved path

问题

I just want to animate my image through curved path. Like this way. ( I'm using position absolute for positioning. ) Did some research and found that css transform can do the job. It can be easily done by straight line. But curved path?

I tried to combine with css transform-origin + transform:rotate but I didn't get exact that I want. Clearly I want to move around 80% to the left curved and need to come to original position. I tried so many times adjusting my code but still no luck.

Fiddle

P.S

What is transform-origin really do here? Is it necessary? Can someone explain me about how transform:rotate works here?

Here is my code

.sun{
  width: 5.7%;
  position: absolute;
  top: -5%;
  left: 57%;
  animation: circle 10s linear infinite;
  transform-origin: 0px 700px;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes circle {
  from {
    transform:rotate(-60deg); 
  }
  to { 
    transform:rotate(40deg); 
  }
}

<div class="sun">
 <img src="sun.png" alt="">
</div>

回答1:

Maybe make parent element move by rotate and children (in my case pseudoelement, whatever) make position absolute to the parent. And just use animation. Look at my solution. Maybe you will have to create some wrapper and use overflow: hidden, because it is square which is rotating. You can watch square's behavior by adding background-color.

@keyframes move-sun {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(90deg);
  }
}

.sun {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 200px;
  transform: rotate(90deg);
  animation: move-sun 10s;
}

.sun::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  width: 50px;
  height: 50px;
  background-color: #ff0;
  border-radius: 50%;
}

<div class="sun">

</div>

回答2:

When you want to apply some transform operation to an element, that transformation has a reference point from where it will be applied. That is the origin point and by default it is at the center of every element (i.e.: transform-origin(50% 50%)).

With this statement you can modify that origin whenever you need the transformation to apply from a different origin.

Here you can see an example when the rotation is done from the top left corner. Without the origin modification, it would rotate around its center.

Note: You can set the transform-origin even outside the element

回答3:

It might not be easy with CSS, but you can easily do this with SVG animation.

I modified a sample from this tutorial for your case:

<svg width="500" height="350" viewBox="0 0 350 350">
  
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M100,100Q250,-50,400,100"/>
  
  <g id="sun" transform="translate(-100, -300)">
    <circle cx="100" cy="300" r="25" fill="yellow"/>
</g>
   
  <animateMotion 
           xlink:href="#sun"
           dur="3s"
           begin="0s"
           fill="freeze"
           repeatCount="indefinite"           
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

来源：https://stackoverflow.com/questions/46949940/css-animate-object-in-curved-path

标签

html

css

html5

css3

css-animations