Connect with us

Technology

Create Highly effective CSS Animation Results with out JavaScript – SitePoint


On this article, we’ll discover the world of animations on the Internet utilizing solely CSS. We’ll first create a easy animation utilizing a mixture of SVG and CSS. We’ll then create one other couple of animations utilizing solely HTML and CSS. We’ll additionally focus on when we have to name JavaScript into motion and the restrictions of CSS.

By the tip of this text, you’ll have the ability to use CSS to create animations in favor of utilizing JavaScript. You’ll additionally have the ability to establish whenever you’ll want to make use of JavaScript to create an animation.

To get essentially the most out of this text, it’s presumed you will have no less than a core information of CSS and HTML. For those who’re simply beginning with internet improvement, there are some nice assets for studying and getting assist, comparable to studying assets on sitePoint, the very useful SitePoint boards, and likewise freecodecamp.

Drawing Impact Animation

That is a powerful animation that’s deceptively straightforward to create. Beneath is a screenshot of what we’re aiming for.

We first have to create the SVG for our brand:

<svg xmlns="http://www.w3.org/2000/svg" width="279.15" top="343.95" overflow="seen" 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>

Right here’s a Pen with that SVG arrange. Be happy to fork it so you’ll be able to observe together with the steps under.

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

svg {
  fill-opacity: 0;
}

(Up to date Pen)

We are able to now think about drawing the SVG. We’ll obtain this through the use of the CSS stroke-dashoffset and stroke-dasharray properties.

The stroke-dasharray property controls the sample of gaps and dashes used to make a stroke a path. For instance, stroke-dasharray: 10 utilized to the paths within the SVG creates a dashed impact with stroke and hole lengths of ten pixels:

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

Now, for the animation we’re creating right here, we would like our hole and sprint to be the identical size as our path. That’s, the entire size of our brand define can be thought of “one sprint”, so to talk, and one hole may even be the entire size of the define too. The concept is that we’ll begin with the brand define as a spot, after which animate within the define because the sprint.

However how lengthy is the brand’s define? A simple approach to take care of that is to set the size. Let’s edit our SVG code by including pathLength="1" to every path:

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

(Up to date Pen)

This makes it a lot simpler to do the drawing animation. Now that we’ve set the pathLength, we will additionally set the stroke-dasharray to 1 within the CSS:

svg path {
  stroke-dasharray: 1;
}

(Up to date Pen)

Now, it seems that nothing has modified right here, however that’s okay. The entire path for every a part of the brand is only one massive sprint now. (You possibly can experiment by eradicating pathLength="1" from one of many paths. It is going to immediately turn into a dotted line of 1px line and gaps.)

We are able to now use stroke-dashoffset, which specifies how far into the sprint sample we must always begin the sprint. In our case, we wish to set stroke-dashoffset to 1, so we begin on a hole moderately than a sprint. Because the size of every of our gaps is all the size of our path, we’ll now see a clean display screen:

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

We are able to now animate stroke-dashoffset again to 0, which is able to give a drawing impact:

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 Brand Animation: Step 5
by SitePoint (@SitePoint)
on CodePen.

To finish our animation, we simply need to animate in our fill-opacity:

svg {
  width: 40%;
  fill-opacity: 0;
  // we set a delay of 2s so it will not begin till our drawing is completed
  animation: fadeOpacity 2s forwards 2s;
}

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

We now have our remaining animation:

See the Pen
SitePoint Brand Animation: Step 6 (remaining)
by SitePoint (@SitePoint)
on CodePen.

I guess that was loads simpler than you thought! I do know the stroke-dashoffset and stroke-dasharray attributes could be a little complicated, however whenever you set your path to have a size of 1, they’re a lot simpler to work with.

That’s a fast instance of the ability of CSS mixed with SVG. Now let’s push this additional in our subsequent instance.

CSS Candle Animation

So we form of cheated within the final instance as we used an SVG. For this subsequent instance, we’ll use solely CSS (and HTML, after all).

With this animation, we’ll use some primary CSS drawing. Then we’ll create a set off occasion with CSS. Lastly, we’ll emulate a flame (as greatest we will!).

Excited? Scared? I’m each! So let’s go!

I realized loads about drawing with CSS by means of the superior Jhey Thompkins. I like to recommend testing this nice article for some additional studying.

Notice: you’ll see under that I take advantage of absolute positioning and rework to place my HTML components, which is sweet trick when drawing with CSS.

Beneath is what we wish to draw utilizing CSS:

the candle we will draw

You possibly can observe together with me in case you’d like. I’ve arrange a base Pen that has the basis of every part arrange.

So let’s first draw the bottom of our candle (the desk floor).

We’ll use some SCSS variables for the colour and the width of our desk:


$tableWidth: 280px;
$tableHeight: 10px;
$tableBackground: #8b4513;

The desk is mainly a div with some dimensions.

We are able to replace our HTML to look as follows:

<div class="wrapper">
  <div class="desk"></div>
</div>

Now we add some primary SCSS (we use rework to heart our desk):

.desk {
  place: absolute;
  left: 50%;
  high: 50%;
  width: $tableWidth;
  top: $tableHeight;
  background: $tableBackground;
  rework: translate(-50%, -50%);
  z-index: 2;
}

This may look a little bit lifeless. The trick to CSS drawings is to make use of box-shadow, so let’s add that in:

.desk {
  ....
  box-shadow: 0px 2px 5px #111;
}

You must now have this:

See the Pen
Candle Animation: Step 2
by SitePoint (@SitePoint)
on CodePen.

Superior!

Let’s put a candle on that desk now. We’ll arrange just a few SCSS variables for our candle dimensions and colour (be happy to make use of no matter dimensions you’d like):


$candleWidth: 35px;
$candleHeight: 130px;
$candleBorderColor: #673c63;
$stickWidth: 3px;
$stickHeight: 15px;

For those who study the picture of the candle I confirmed earlier, you’ll be able to see that it’s primarily a div with a giant border and a stick on high. Let’s first draw the candle itself.

We first replace our HTML:

<div class="wrapper">
  <div class="candle">
  </div>
  <div class="desk"></div>
</div>

Now we add our CSS (once more, box-shadow is the trick right here):

.candle {
  place: absolute;
  left: 50%;
  high: 50%;
  width: $candleWidth;
  top: $candleHeight;
  background: #fff;
  transform-origin: heart proper;
  rework: translate(-50%, -100%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  border: 3px stable $candleBorderColor;
}

Cool! We’ve our candle!

See the Pen
Candle Animation: Step 3
by SitePoint (@SitePoint)
on CodePen.

Now we add our stick on high (we’ve already included the size for this above).

We first want so as to add it to our HTML:

<div class="wrapper">
  <div class="candle">
    <div class="candle-stick"></div>
  </div>
  <div class="desk"></div>
</div>

CSS (nothing too fancy right here):

.candle-stick {
  width: $stickWidth;
  top: $stickHeight;
  background: #673c63;
  place: absolute;
  left: 50%;
  high: 0%;
  background: $candleBorderColor;
  border-radius: 8px;
  rework: translate(-50%, -100%);
}

We’ve efficiently drawn our candle:

See the Pen
Candle Animation: Step 4
by SitePoint (@SitePoint)
on CodePen.

As you’ll be able to see, there’s no animation right here, so let’s get began on an animation.

We’ll first add a button that may change the background colour from mild to darkish (we have already got these SCSS variables arrange — $lightBackground and $darkBackground). Add this to the very high of the HTML:

<enter id="toggle" sort="checkbox">
<label for="toggle">Set off Candle</label>

This may give us a not so engaging checkbox and label. So let’s fashion this up so it appears to be like a little bit higher:

label {
  background: #a5d6a7;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  place: absolute;
  font: 900 24px/1.4 -system-ui, sans-serif;
  rework: translate(50%, 50%);
  cursor: pointer;
}

This offers a bit of fashion to the label, however we additionally wish to disguise the checkbox from view. Now, we may do that by including the hidden attribute to the checkbox HTML. Nonetheless, that makes the checkbox inaccessible to keyboard navigators, so a greater choice is to easily transfer it out of sight. Firstly, let’s add a category of .visually-hidden to the checkbox HTML:

<enter id="toggle" sort="checkbox" class="visually-hidden">

Then we transfer the checkbox to the left with this CSS:

.visually-hidden {
  place: absolute;
  left: -100vw;
}

Let’s additionally present a visible cue when the checkbox has focus:

enter:checked + label {
  define: 1px dotted purple;
}

(For those who have been questioning why I positioned the enter earlier than the label within the HTML, now you understand why. It’s in order that we may use a sibling selector (+). We’ll use one other one later.)

Now, you most likely don’t like that purple, dotted define across the button, however I’ll go away it to you to give you one thing higher. (For instance, you might change the background colour of the label as an alternative.)

Right here’s what now we have now:

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

Let’s change the background of the web page based mostly on whether or not the checkbox is checked or not. We are able to do that with out utilizing JavaScript through the use of the overall sibling selector ~:

#toggle:checked ~ .wrapper {
  background: $lightBackground;
}

Now we will additionally add a transition so it’s little bit smoother:

.wrapper {
  background-color: $darkBackground;
  top: 100vh;
  width: 100vw;
  transition: background-color 0.6s ease;
}

We now have this:

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

Cool!

One other factor we’ll do is add a flame when the background is brilliant.

Like earlier than, we arrange our SCSS variables:


$flameHeight: 20px;
$flameWidth: 16px;
$flameColor1: #e25822;
$flameColor2: #e2b822;

Let’s additionally replace the HTML to incorporate the flame:

<label for="toggle">Set off Candle</label>
<enter id="toggle" sort="checkbox" hidden>
<div class="wrapper">
  <div class="candle">
    <div class="candle-stick"></div>
     <div class="flame"></div>
  </div>
  <div class="desk"></div>
</div>

The bottom of our flame wants to make use of border-radius with eight values. When drawing sophisticated shapes, the Fancy Border Radius Generator web site is nice for producing the border-radius for you.

So right here’s our CSS (the border-radius being the important thing half):

.flame {
  width: $flameWidth;
  top: $flameHeight;
  background: #673c63;
  place: absolute;
  left: 50%;
  high: 0%;
  background: $flameColor1;
  rework: translate(-50%, -170%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

That offers us this:

See the Pen
Candle Animation: Step 7
by SitePoint (@SitePoint)
on CodePen.

Now we will add a little bit animation to make it flicker like an actual flame. We’ll change the flame between two colours ($flameColor1 and $flameColor2) and we’ll additionally differ the place barely to the left and proper. Firstly, right here’s the keyframe code:

@keyframes fire-flicker {
  from {
    background: $flameColor1;
    left: 47%;
  }

  to {
    background: $flameColor2;
    left: 53%;
  }
}

We then want so as to add this animation to the flame class:

 animation: fire-flicker 0.2s infinite linear;

Our flame will now be flickering:

See the Pen
Candle Animation: Step 8
by SitePoint (@SitePoint)
on CodePen.

Be happy to have a go at bettering this, because it could possibly be higher!

Okay, let’s make an additional adjustment. We’ll flip the flame off when the background is darkish.

We’ll use opacity to realize this. On the flame class, add opacity. We’ll additionally add a transition to it so it matches the background:

.flame {
  ...
  opacity: 0;
  transition: opacity 0.6s ease;
}

Then we will use the ability of SCSS and a few nesting for checked states:

#toggle:checked ~ .wrapper {
  background: $lightBackground;
  .flame {
    opacity: 1;
  }
}

Now the flame solely reveals up with the sunshine background:

See the Pen
Candle Animation: Step 9
by SitePoint (@SitePoint)
on CodePen.

Lastly, the “Set off Candle” textual content of the label is a bit bland. We may do loads with that! So let’s enhance our label in order that the textual content toggles between “Lumos” and “Nox” — impressed by Harry Potter, after all!

First, we will change our label to don’t have any textual content (we’ll use content material so as to add the textual content in):

<label for="toggle"></label>

Now we’ll add some CSS to toggle the textual content:

label::after {
  content material: "Lumos";
}

#toggle:checked ~ label::after {
  content material: "Nox";
}

And to cease the label leaping round, let’s add the next types:

label {
  ...
  min-width: 100px;
  text-align: heart;
}

And there now we have it. Our candle animation is completed — with not a hint of JavaScript!

See the Pen
Candle Animation: Step 10 (remaining)
by SitePoint (@SitePoint)
on CodePen.

As an added bonus, in case you’re not into SCSS and would moderately experiment with CSS customized properties (aka variables), right here’s a pure CSS model of our candle demo. It’s not a lot totally different! (After all, you can even view the compiled CSS on every of the Pens above in case you want. Open CSS Settings > CSS Preprocessor > None.)

Pulse Animation

This can be a much less concerned animation however reveals what you are able to do with solely a little bit CSS.

To get began, we have to make a circle. Let’s first add some HTML:

<div class="pulse">

</div>

Now we will use some CSS to create our circle:

.pulse {
  place:absolute;
  left:50%;
  high:50%;
  rework:scale(1.5,1.5) translate(-50%,-50%);
  top: 150px;
  width: 150px;
  background: #a83f39;
  border-radius: 50%;
}

That is what now we have to date:

See the Pen
Pulse Animation: Step 1
by SitePoint (@SitePoint)
on CodePen.

To create a pulse animation, we use the box-shadow property. For those who’ve by no means used box-shadow earlier than, Mozilla has some nice documentation:

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4);
  }
  70% {
      box-shadow: 0 0 0 50px rgba(168, 63, 57, 0);
  }
  100% {
      box-shadow: 0 0 0 150px rgba(168, 63, 57, 0);
  }
}

To make use of this animation, we simply want so as to add this to .pulse:

.pulse {
   ....
   animation: pulse 2s infinite;
}

We’ve now created our pulse animation. Not too shabby, eh?

See the Pen
Pulse Animation: Step 2 (remaining)
by SitePoint (@SitePoint)
on CodePen.

What Can’t You Do with CSS?

In order a lot as I like CSS animations, there are some issues which can be inconceivable or very troublesome to do.

  • There’s no approach which you could search by means of a CSS animation, or soar to a sure a part of the animation. So tailoring your animation based mostly on the place of a person click on can be very troublesome to do. To attain this with JavaScript, I might advocate utilizing the good GreenSock library.

  • Animating alongside a curve may be very troublesome to do.

  • Animations involving scrolling are additionally difficult, though Chris Coyier explains how you are able to do it with only a teeny little bit of JavaScript.

  • Animating the peak of a component from an auto-computed top.

  • Sequencing a number of animations can also be fairly troublesome. You possibly can obtain this with delays, however for advanced animations with quite a lot of shifting elements it may be very troublesome. Once more, that is a lot simpler with the GreenSock library.

Above are a few of the key limitations of CSS animations. A few of these will be bypassed through the use of SVGs, however total the above is way more simply achieved with JavaScript.

Conclusion

I hope by studying this text you come away with a recent understanding of CSS animations. What I’ve confirmed on this article is simply scratching the floor. I’ll checklist some inspirational Pens under which you could try!

Be happy to verify me out on Instagram or YouTube.

Nice CodePen Examples

Assets Used



Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *