How to Add Animation on Hover for an SVG Element
We can define keyframe animations for SVG elements with CSS. In this example, we animate the transform property with keyframes. Here, we trigger this effect on mouse hover.
How to Draw Quadratic Bézier Curves with SVGDrawing a Bell
First, let’s define the bell as an SVG. We draw the bell as a path with cubic and quadratic Béziers curves and straight line segments. Let’s start with the bottom. We begin with a move-to command and then use the line-to command to draw straight lines.
Then a quadratic Beziers starts the bell cloak. Hover over the coordinates in the code or on the image to see how they are positioned.
Then the line is continued with a cubic Bezier to form the top of the bell.
Then we reach the bottom part with another quadratic bezier that mirrors the previous one.
We finish the bell, by adding two circles for the bell-clapper, and the hanger.
Adding Animation on Hover
Now, let’s add an id
for the elements we move. We assign an id to the group containing the whole bell and one for the bell clapper.
Then, we can add a keyframe animation on hover
on the bell and the bell clapper. We use the same animation that alternates the rotation back and forth for both of them. We also set the timing function to ease-in-out
to slow the animation at the leftmost and rightmost positions.
Notice that we also set the transform-origin
property for the group. This ensures that the rotation occurs around the bell hanger and not the origin of the coordinate system.