Animate bicycle SVG with CSS

By: Emil Firšt

Did you know that front-end development can be fun? Off-course it is fun 🙂 CSS3 allow us to be fully creative by creating cool, outstanding animations and effects. By using simple CSS properties you can give new dimension to your web site and make your users their user experience more friendly and enjoyable.

In this tutorial we will show you how to make animated SVG bicycle. At the first sight animation looks very complex but, actually, it’s about using and reusing simple CSS properties applied to different elements.

Draw bicycle

First we need to create an illustration of bicycle. To draw any illustration is not the easiest if you don’t have enough skills. The one way to do it is to draw over the existing image, off-course, if you want to use it for commercial purposes you need to have a licence. For creating illustrations we recommend to use vector based software like Adobe Illustrator.

Note that shapes and paths have different behaviours when animating so we recommend to play with paths and shapes first to see how they behave on different CSS properties.

Before you start drawing you need to know which parts you want to animate. To manipulate elements you need to place each one to a new layer. The good habit is to name layers because when you export SVG the elements will be separated in different XML elements with the ID which is name of the layer in a tool you used. You can also add additional classes to elements if you like.

Let’s say you want to create an animated line which has direction from left to right. First you need to draw a line with pen tool but you should keep in mind that SVG paths are directional which means that its direction is written in SVG markup and looks like this:

<path d="M326.5,456.1c0,0-55-37-129,13.5"></path>

So if you want it to go from left to right you should draw it from left to right. If you want to change the direction you can do it by using direct selection tool.

The other thing is that if you change color of the drawn element that will be also written in code and you can manipulate with it through CSS.

Create SVG

When you’re finished with illustration you need to save it as SVG file.

Click save, check embedand confirm with ok:

SVG structure

SVG file contains XML markup. You can see it by opening the file in your favourite text editor. All elements you have drawn in Illustrator are here with its attributes.

Start animating

Frame

What we want to do first is to animate all elements that we want to look like they are lines drawn from point A to point B and which have common properties like animation-duration, animation-name, animation-fill-mode, animation-delay and animation-iteration-count. Those elements are bicycle frame, pedal box and all paths.

As you can see all paths has “path-line” class and frame is separated on four parts. Frame 1 and frame 4 have common properties. Frame 2 and frame 3 are separated because of different animation-duration and animation-delay. We’ll check them a little bit later.

To make smooth appearing transition we need to make element invisible so we set initial opacity to zero. After that we have two attributes, stroke-dasharray and stroke-dashoffset.

Stroke-dasharray attribute allow us to create dashed lines. With stroke-dashoffset attribute we define distance in dash pattern. In practice, we combine those attributes to get kind of lines that suit our needs. We set them to 700 to have solid line.

Then we have animation property where we bind the animation to an element, set its duration and fill mode. But to use it we should first add some keyframes. With keyframes we define how, where and when will the animation change the element’s style. Keyframes can be added with @keyframes rule and we also should assign animation name to it.

As you can see we used percentage of completion to define the points of change. It means: at the starting point (0%) animation is invisible and has stroke-dashoffset value 700. When the animation is 5% complete it become visible and when the animation is complete (100%) stays visible and has stroke-dashoffset value 0. Stroke-dashoffset change value from 700 to 0 which give us the effect of drawing. Note that you can have as many points with changes you want.

There is also another way of specifying the points of change. It’s about using keywords from and to where from is 0% and to is 100% of animation completion.

We have set animation-duration to 2.5 seconds because we wanted it to last that long. We also have assigned animation-name cycle and set animation-fill-mode to forwards. Here we have some new property called animation-fill-mode. It defines how CSS animation should apply styles to its target before and after it’s playing. We set the property value to forwards because we want to apply the property values for the time the animation ended. Check out for more properties on W3Schools.

Then we set up animation-delay to 0.8 seconds because we want the animation of selected elements to start 0.8 seconds later. Animations applied to other elements will have different animation-delay values to achieve finer animation flow.

At the end we should define how many times our animation will be played. The property is called animation-iteration-count. The value can be a number (1,2,3,4 etc), infinite (play forever), inherit (inherits the property from parent element) or initial (default value 1).

Next elements are Frame 2 and Frame 3 which has the same properties but with different values:

Steering wheel has applied two animations: cycle and steeringwheel-rotate. In the midst of well known properties you can see transform-origin property not mentioned before. It allows you to change the position of transformed elements. Its values are related to X- and Y- axis so you should play with it until you get what you want. We set it to x400px, y400px.

Take a look at the @keyframes rule for the animation called steeringwheel-rotate. As its name say it contains keyframes with transformproperty and rotate method. What we want is to rotate it for 10 degrees when the animation is 10% complete and go back on 0 degree when it’s 60% complete.

Our handle consists of two lines so we need to select each one using :nth-child(). First element has the same properties we explained before and has applied handle-line and rotate-handle animations. handle-line animation give us appearing and drawing line effect and has @keyframe role:

First of all there is translatemethod which defines translation of the element along the X- and/or Y-axis. At the starting point the handle is rotated for 10 degrees and also translated for 11px along vertical axis. At the 50% the element rotates for 20 degrees and translates for 5px along the horizontal axis. At the 70% the element has rotation angle 0.

Wheels

Next elements we want to animate are wheels and their shadows. We want that left and right wheel simultaneously appear from the center and move to the side including their shadow. So first we select left wheel, circle inside of a left wheel and left wheel’s shadow. Then we apply animation wheel-move-left and its properties:

Mudguards

Mudguards are placed above each wheel and they already are animated because both mudguards are paths with class “path-line”. Let me remind you, path-line has applied the cycle animation. Because of that we only need to add a delay on them so they start animating at the time we want:

svg #mudguard-L path,
svg #mudguard-R path {
animation-delay: 1.2s;
}

Basket

Basket should be placed next to the steering wheel. It is made of paths with classes “basket-part1” and “basket-part2”. We want them to look like they scale from one point. To animate it we used two animations: scale-basket and show-basket.

Path “basket-part1” has assigned scale-basket which animate it to appear and scale up.

Pedals

The bicycle is almost finished! One more part is missing, pedals. You can create spinning animation if you like but we will keep it simple and just made them appear.

Pedals are made of front and back pedal bars because one pedal is behind the pedal-box element so we need to make structure like that to work. For showing pedals we created an animation called show-pedal-bar.