Play button and stopwatch

Experiments: Animating SVGs with CSS

Published on 2017-07-28 00:00

It has been some time since I updated a theme of this Wordpress blog, almost a year. Since then a lot of things on the web has changed. But this post is about one small change that I am planning to make and that's animating at least one of the SVGs on the home page. The logo has one animation already, so this time I'll animate slightly redesigned header of the Code section.


First, let's start with an image:

cloud and sun

It's simplified and cleaner version of the current header for Code section. So far nothing interesting to see. Next step is to export this image to SVG format in the graphics editor and straight to the text editor. At the moment I don't use any code optimizers.

In the text editor I need to add an id  or a class  to the animated element, in my case it is the cloud.

<path id="sghome-cloud" d="M276,160.477 C276,177.941...
Hopefully the id is unique enough not to complicate things for the rest of the web page because I do plan[1. can change] to embed the images into the mark up.

In CSS I went through several iterations of the significant points in the animation's keyframes:

/*iteration #1 */
@keyframes cloud { 
  0% { transform: translateX(0) }
  50% { transform: translateX(150px); }
  100% { transform: translateX(0); }

/* iteration #2 */ @keyframes cloud { 0% { transform: translateX(0) } 20% { transform: translateX(150px); } 80% { transform: translateX(-200px) } 100% { transform: translateX(0); } }

/* iteration #3 */ @keyframes cloud { 20% { transform: translateX(150px); } 80% { transform: translateX(-200px) } }

Cloud and sun

Until I came to the last one:

@keyframes cloud { 
  0% { transform: translateX(-200px) }
  50% { transform: translateX(150px); }
It solves "problem" of the cloud stopping at 0% and 100% at it's original location. It's a small slow down but it bothers me a little.

Next came or rather concurrently came a problem with timing functions. My favourite go to function is ease-in-out because it's not as harsh as linear or simple ease-{in|out}. But in this case it just made 0% and 100% more visible. After fixing that problem ease-in-out became the logical choice to use and no matter how long I tried to bend the Bezièr curve in Firefox's dev tools I couldn't find better animation function.

From usability stand point the trickiest part was the decision on how long should the animation last. It shouldn't be a fast animation, so anything less than 10s is ruled out, because it would just distract users from the main content of my blog. For development purposes I chose 60s as the base line but since I am writing this and I am able to see the animated image for some time now, I am considering that 120s, 180s, may be longer might actually be better. It's supposed to be a cloud after all and it should be unobtrusive, eye candy for those who appreciate it.

Final CSS:

#sghome-cloud {
  animation: cloud 180s ease-in-out infinite;
And final result:

Cloud and sun