JSFeeds: sitepoint.com - Create Powerful CSS Animation Effects without JavaScript

Monday, 1 February, 2021 UTC

Create Powerful CSS Animation Effects without JavaScript

Summary

In this article, we’ll explore the world of animations on the Web using only CSS. We’ll first create a simple animation using a combination of SVG and CSS. We’ll then create another couple of animations using only HTML and CSS. We’ll also discuss when we need to call JavaScript into action and the limitations of CSS.

By the end of this article, you’ll be able to use CSS to create animations in favor of using JavaScript. You’ll also be able to identify when you’ll need to use JavaScript to create an animation.

To get the most out of this article, it’s presumed you have at least a core knowledge of CSS and HTML. If you’re just starting with web development, there are some great resources for learning and getting help, such as learning resources on sitePoint, the very helpful SitePoint forums, and also freecodecamp.

Drawing Effect Animation

This is an impressive animation that’s deceptively easy to create. Below is a screenshot of what we’re aiming for.

We first need to create the SVG for our logo:

<svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
 <path d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z"/>
 <path d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z"/>
</svg>

Here’s a Pen with that SVG set up. Feel free to fork it so you can follow along with the steps below.

With our SVG in place, we now set the fill-opacity to 0. We’ll animate this back in later:

svg {
  fill-opacity: 0;
}

(Updated Pen)

We can now concentrate on drawing the SVG. We’ll achieve this by using the CSS stroke-dashoffset and stroke-dasharray properties.

The stroke-dasharray property controls the pattern of gaps and dashes used to make a stroke a path. For example, stroke-dasharray: 10 applied to the paths in the SVG creates a dashed effect with stroke and gap lengths of ten pixels:

See the Pen
Stroke-dasharray demo by SitePoint (@SitePoint)
on CodePen.

Now, for the animation we’re creating here, we want our gap and dash to be the same length as our path. That is, the whole length of our logo outline will be considered “one dash”, so to speak, and one gap will also be the whole length of the outline too. The idea is that we’ll start with the logo outline as a gap, and then animate in the outline as the dash.

But how long is the logo’s outline? An easy way to deal with this is to set the length. Let’s edit our SVG code by adding pathLength="1" to each path:

 …
 <path pathLength="1" d="M110.57 … >
 …

(Updated Pen)

This makes it much easier to do the drawing animation. Now that we’ve set the pathLength, we can also set the stroke-dasharray to 1 in the CSS:

svg path {
  stroke-dasharray: 1;
}

(Updated Pen)

Now, it appears that nothing has changed here, but that’s okay. The whole path for each part of the logo is just one big dash now. (You can experiment by removing pathLength="1" from one of the paths. It will suddenly become a dotted line of 1px line and gaps.)

We can now use stroke-dashoffset, which specifies how far into the dash pattern we should start the dash. In our case, we want to set stroke-dashoffset to 1, so we start on a gap rather than a dash. Since the length of each of our gaps is the entire length of our path, we’ll now see a blank screen:

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
}

We can now animate stroke-dashoffset back to 0, which will give a drawing effect:

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
  animation: draw 2s forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Cool! With this in place we now have this:

See the Pen
SitePoint Logo Animation: Step 5 by SitePoint (@SitePoint)
on CodePen.

To complete our animation, we just have to animate in our fill-opacity:

svg {
  width: 40%;
  fill-opacity: 0;
  // we set a delay of 2s so it won't start until our drawing is finished
  animation: fadeOpacity 2s forwards 2s;
}

@keyframes fadeOpacity {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

We now have our final animation:

See the Pen
SitePoint Logo Animation: Step 6 (final) by SitePoint (@SitePoint)
on CodePen.

I bet that was a lot easier than you thought! I know the stroke-dashoffset and stroke-dasharray attributes can be a little confusing, but when you set your path to have a length of 1, they’re much easier to work with.

That’s a quick example of the power of CSS combined with SVG. Now let’s push this further in our next example.

Continue reading Create Powerful CSS Animation Effects without JavaScript on SitePoint.

... more @ sitepoint.com

sitepoint.com