CSS - Animate object in curved path
Jan*_*ath 3 html css css-animations
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.
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>
使用 CSS 可能不太容易，但使用 SVG 动画可以轻松做到这一点。
我根据您的情况修改了本教程中的示例：
<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>小智 5
也许通过旋转使父元素移动，子元素（在我的情况下是伪元素，无论如何）使父元素的位置绝对化。并且只使用动画。看看我的解决方案。也许您将不得不创建一些包装器并使用overflow: hidden，因为它是旋转的正方形。您可以通过添加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>小智 5
我意识到这是一个老问题，但我只是想添加另一个选项。您可以使用 2 个单独的动画，一个用于 x 运动，一个用于 y 运动：
body {
background: #8DBECC;
}
.container {
position: relative;
height: 100%;
width: 100%;
}
.sun {
position: absolute;
width: 30px;
height: 200px;
animation: x-motion 3s ease-in-out 0s infinite alternate;
}
.sun:before {
content: '';
width: 30px;
height: 30px;
position: absolute;
top: 100%;
background: #F18C3E;
animation: y-motion 3s ease-in-out 0s infinite alternate;
border-radius: 15px;
}
@keyframes x-motion {
0% {
left: 0;
}
100% {
left: calc(100% - 30px);
}
}
@keyframes y-motion {
0%, 100% {
top: 100%;
}
50% {
top: 0%;
}
}<html>
<body>
<div class="container">
<div class="sun">
</div>
</div>
</body>
</html>https://jsfiddle.net/561pbt0r/27/