Animating With Minimal CSS and SVGs

Animating With Minimal CSS and SVGs
Spread the love
  • 2
    Shares

For When Javascript Is Just a Bit Too Much for You Right Now

A recent project I was working on found me using a lot of radio buttons and checkboxes, but they did not fit the aesthetic of my site at all. I poked around the web a lot for ways to change these buttons, but most solutions I found used Javascript, which I hadn’t yet begun to learn, or just an endless style sheet that would take days for me to decipher.

No Thank You!

Transitions

Then I discovered how I could use SVGs to bypass the visual part of the CSS. As someone who like to use Adobe Illustrator for fun, this seemed like the perfect solution for me.

This involved two major steps:

  1. Draw the assets. This one may sound a bit daunting for anyone who isn’t familiar with vector illustration programs, but you can find plenty of beautiful SVGs online at places like The Noun Project.
  2. Animate them! This was a feature I did not realize CSS had, but it’s immensely flexible and allows for some very cool dynamic effects on the page without javascript.

The animation step is what threw me for a loop, but it’s actually incredibly simple– all you need to do is give a before state, an after state, and the CSS transition tag (which I’ll explain in a moment!)

The HTML is below — the SVG tag holds my actual SVG code, which was copy and pasted from my SVG file opened in my text editor.

<input id="checkBox" type="checkbox">
<label for="checkBox">
<svg>
<g id="Label"></g>
<g id="Check" class="appear"></g>
</svg>
</label>

The label associated with the checkbox can be clicked to change the “checked” status of the checkbox. This means that we can get rid of the actual checkbox and just style the label! So in the CSS we do this to hide it and get rid of the hover effect:

input {
position: absolute;
opacity: 0;
cursor: pointer;
}

Next, we want to animate our checkmark. To do this, we use the CSS transition tag.

label .appear {
opacity: 0;
transition: opacity .5s ease;
}
input:checked ~ label .appear {
animation: opacity .5s ease;
opacity: 1;
}

First, we set the checkmark’s opacity to 0 so that the box will appear unchecked. Then, any “.appear” that immediately follows (via the CSS ~ selector) a checked input box will be given an opacity of 1.

RELATED:  Notched Boxes

The transition tag says that the opacity will transition over .5 seconds and ease into the beginning and ending of the transition.

This ends up looking like:

Much prettier!

Keyframes

Another animation technique I discovered is CSS Keyframes. Anyone who has spent some time in a video editing software should be familiar with the timeline, which is the duration of a video. Keyframes are individual points on that timeline with different states assigned to an object.

In the case of CSS, this can look like this:

@keyframes rotate-tire {
0% {transform: rotate(0deg)}
100% {transform: rotate(359deg)}
}

At the beginning of our timeline (0%) our object is rotated 0 degrees, and at the end of the timeline it is rotated (100%).

We can then apply this to an object the same way we did with transitions before:

.tire {
animation: rotate-tire .25s linear infinite;
transform-origin: 50% 50%;
}

Our tire class animates with the above rotate-tire @keyframes, over the course of .25 seconds, and instead of easing it will go at a linear speed, and it will continue infinitely.

Now we just need an SVG of a car with some tires with the class of “.tire” and we can see it start driving!

Keyframes can do a whole lot more than just rotating– and it’s all done through just CSS!

Original article published here


Spread the love
  • 2
    Shares
0 I like it
0 I don't like it

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.