Animated CSS Timer Icon

I recently had a need for a timer/revert icon that can animate forward and backward.

Features

Pure CSS

I wanted it to be a purely CSS and HTML versus an animated SVG or GIF so it can be manipulated more easily in the browser.

Adjustable Size

The size of the icon is relative to the wrapper so setting a different font-size will scale the icon proportionally.

Animation in Multiple Directions

The icon needs to animate forward and backward as well as have a rest state. The animation uses CSS keyframes based on the classes, ‘forward’ and ‘backward’.

 

CSS Timer Icon

See the Pen CSS Timer Icon Animation by Joel Turner (@joelmturner) on CodePen.dark

 

CSS Timer Icon as React Component

See the Pen React and CSS Animated Timer Icon by Joel Turner (@joelmturner) on CodePen.dark

Getting Sassy With Sass: Nesting

As I’m learning to use Sass I decided to jot down some of the basics for reference. Most of this is coming from
Hampton Catlin‘s Sass Basics course on Treehouse (referral).

Nesting Selectors

The selectors can be nested for ease of writing and reading. This can help organize code in a way that like selectors are
together. It also keeps us from having to repeat strings of selectors. A quick example would be:

Sass:


    .selector1 {
        .selector2 {
            color: red;
        }
    }

CSS Output:


    .selector1 .selector2 {
        color: red; 
    }

You can even go deeper if you would like. Let’s take a look at 4 levels deep (the suggested maximum depth for Sass).

Sass:


    .selector1 {
        .selector2 {
            color: red;
            .box {
                background: blue;
                h1 {
                    color: green;
                }
            }
        }
    }

CSS Output:


    .selector1 .selector2 {
        color: red; 
    }
    .selector1 .selector2 .box {
        background: blue;
    }
    .selector1 .selector2 .box h1 {
        color: green; 
    }

Using the & Symbol

There is a helper character that makes referencing parent selectors much easier. This character is the
ampersand (&) symbol.

Sass:


    .blog {
        > h1 {
            color: red;
            border: 1px solid red;
        }
        .entry {
            h1 {
                font-size: 20px;
                color: blue;
            }
            p {
                font-size: 12px;
                margin: 20px;
                html.csscolumns & {
                    column-count: 2;
                    column-gap: 10px;
                    margin: 10px;
                }
            }
            a {
                color: red;
                &:hover {
                    color: blue;
                }
            }
        }
    }

CSS Output:


    .blog > h1 {
        color: red;
        border: 1px solid red;
    }
    .blog .entry h1 {
        font-size: 20px;
        color: blue;
    }
    .blog .entry p {
        font-size: 12px;
        margin: 20px;
    }
    html.csscolumns .blog .entry p {
        column-count: 2;
        column-gap: 10px;
        margin: 10px;
    }
    .blog .entry a {
        color: red;
    }
    .blog .entry a:hover {
        color: blue;
    }