is there any way to make a trajectory similar to sinusoidal motion with css3 or adding some js?
is there any way to make a trajectory similar to sinusoidal motion with css3 or adding some js?
Pure CSS3 can't be found in the method I know because there is no operation on the path in the CSS3 animation, or it's hard to do it unless you write down the changes in every frame. If you can AE, you can consider animating with AE first, and then using Lottie to export json files available to web, so that you can make very complex animations. But I haven't used this method yet. I can go to Lottie's official document
. < H1 > implement with Canvas < / H1 > here is a method made using Canvas. If you want to use the operation DOM to achieve animation, the principle is the same except that the drawing block is changed to set the positioning of the element.
take a look at Demo
css3(0,0),(1,1),(2,0),(3,1),(4,0),(5,1),:
@keyframes myanimate
{
0% {left: 0;top: 0;}
20% {left: 1;top: 1;}
40% {left: 2;top: 0;}
60% {left: 3;top: 1;}
80% {left: 4;top: 0;}
100% {left: 5;top: 1;}
}
the denser the simulation points are, the closer they are to the sine curve. The above are just ideas, and the distance between points and playback speed should be taken into account. I hope it will be helpful to you