creating css animation is very easy using keyframes but there is some limitation
you cannot move the element along the curve line like this example
so in the css hack episode i'm going to talk about the limitation of css animation
and the workaround to create a curve animation path like this ready let's check it out
the reason why we can't create custom curve animation path
is because css animation engine will always take the shortest path between the keyframe position
let's take a look at this example if we try to recreate a movement using keyframe
to move the element between the peak spot here's what we get you will see that the css engine will
try to move the element directly between each keyframe position resulting in zigzag instead
of wave well it's not impossible though you can create as much keyframes as possible to move the
element along the path but that's going to take lots of effort and running with poor performance
so this is when we are going to start our hack here's what it looks like if you separate the
movement between x and y axis you will see that the key concepts of the wave movement
is the animation speed between x and y axis are asynchronous the problem is since our element can
have only one animation property we can't separate the animation between x and y axis but don't worry
the workaround is very simple since we cannot add two animation properties then we are going
to create an invisible wrapper around our element then add the animation to the wrapper instead
now let's create a separate keyframe for x and y axis movement
i'm going to change the timing function of the x-axis to
linear for the wrapper i'm going to use easing out timing function
finally i will also separate the starting position of the element between the wrapper and the element
here is the result when we combine both axis movement together
the wrapper responsible for the y-axis animation and the element itself for
the x-axis now if you want to emphasize the wave movement or creating spring-like effect
you can change the animation timing function using bezier-curve here is the generator tool
that i usually use when the curve as you like and paste it into the css code
since this method has no limit to how many layers of wrapper we can have
we can create more complicated movement by adding more
for example i'm going to add another wrapper with a rotation around
z-axis
one final note before we end this hack actually there is already a css motion path modules that
let you move the element along the custom path but the problem is it's still an experimental module
and software doesn't support it yet so until that time you will have to rely on this hack
a few years perhaps so that's all for this css hack episode if you like this tutorial
don't forget to subscribe our channel to stay tuned thanks for watching see you next time bye