Infoanimations - infographic styled css animations

Infographics are a great way to present a large amount of information to your visitors in an engaging way - use of them in the marketing world has surged over the past 5 years as they prove themselves to significantly boost traffic and awareness. In this tutorial we'll be looking at taking the classic infographic and bringing it to life with some CSS animations.

The code snippets provided below will explain the CSS and HTML behind the animations on the demo page, so I recommend checking these out before going any further.

View Demo

CSS Ring Animations

This is no doubt the trickier of the three animations as the 'ring' effect is split into two sides, then masking and clipping is used to hide the unnecessary parts of the elements.

HTML

The HTML below covers a single animation, you'd need replicate this code for each additional statistic. The markup consists of an outer 'pie' container, the title, content, arrow and then the left and right side of the rings (these need to be animated separately). Note that the content makes the inner part of the circle appear grey, without this the animation would look more like a 'pie', thus the class references below.

<div class="pie pie1">
    <div class="title">Twitter</div>
    <div class="outer-right mask">
        <div class="inner-right"></div>
    </div>

    <div class="outer-left mask">
        <div class="inner-left"></div>
    </div>
    <div class="content">
        <span>44%</span>
    </div>
    <div class="arrow"></div>
</div>

CSS

The arrow is essentially a CSS triangle that slides downwards behind the content to reveal at the bottom - to learn more on how CSS shapes work or to generate different shapes check out the Coveloping CSS Shapes Generator.

The ring animation takes part in the 'load-right-pie-1' keyframe which rotates the inner right side of the circle into view. The higher the degree, the further the downward the ring will move, maxing out at 180degrees (half a circle). To create an effect higher than 50% you would then need to create a seperate animation to start rotating the inner-left side, I've created a codepen demonstrating this code.

A final animation fades the content text (i.e. the percentage) in last.

.arrow
{
    position: relative;
    height: 0px;
    width: 0px;
    border-top: 18px solid #dd1111;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    position:absolute;
    bottom:40px;
    left:57px;
    z-index:1;
    animation: load-arrow 1.6s linear;
    animation-fill-mode:forwards;
    -webkit-animation: load-arrow 1.6s linear;
    -webkit-animation-fill-mode:forwards;
}

@keyframes load-arrow
{
    from { transform: translate(0,0); }
    to { transform: translate(0,55px); }
}

@-webkit-keyframes load-arrow
{
    from { -webkit-transform: translate(0,0); }
    to { -webkit-transform: translate(0,55px); }
}

.pie
{
    width: 140px;
    height: 140px;
    position: relative;
    border-radius: 140px;
    background-color: #DD1111;
    float:left;
    margin-right:10px;
}

.pie .title
{
    position:absolute;
    bottom:-40px;
    text-align: center;
    width:100%;
}

.mask
{
    position: absolute;
    width: 100%;
    height: 100%;
}

.pie1 .inner-right
{
    transform: rotate(160deg);
    animation: load-right-pie-1 1s linear;
    -webkit-animation: load-right-pie-1 1s linear;
    -webkit-transform: rotate(160deg);
}

@keyframes load-right-pie-1
{
    from {transform: rotate(0deg);}
    to {transform: rotate(160deg);}
}

@-webkit-keyframes load-right-pie-1
{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(160deg);}
}

.outer-left
{
    clip: rect(0px 70px 140px 0px);
}

.outer-right { clip: rect(0px 140px 140px 70px); } .inner-left { background-color: #710000; position: absolute; width: 100%; height: 100%; border-radius: 100%; clip: rect(0px 70px 140px 0px); transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }
.inner-right { background-color: #710000; position: absolute; width: 100%; height: 100%; border-radius: 100%; clip: rect(0px 70px 140px 0px); transform: rotate(180deg); -webkit-transform: rotate(180deg); } .content { width:100px; height:100px; border-radius:50%; background-color:#fff; position:absolute; top:20px; left:20px; line-height: 100px; font-family:arial, sans-serif; font-size:35px; text-align: center; z-index:2; } .content span { opacity: 0; animation: load-content 3s; animation-fill-mode:forwards; animation-delay: 0.6s; -webkit-animation: load-content 3s; -webkit-animation-fill-mode:forwards; -webkit-animation-delay: 0.6s; } @keyframes load-content { from {opacity:0;} to {opacity:1;} } @-webkit-keyframes load-content { from {opacity:0;} to {opacity:1;} }

CSS Circle Animations

HTML

The markup is pretty straight forward for the circles - a container, two cricles and then a containing div for the text.

<div class="circles">
    <div class="circle-one">
        <div class="text">Twitter <br />$10 Billion</div>
    </div>
    <div class="circle-two">
        <div class="text">Facebook<br />$104 Billion</div>
    </div>
</div>

CSS

For the circle animation we use two keyframe steps at 50% and 100%. Both circles are initially scaled to zero (not visible), then at 50% the circles scale up to 1.2 times, and then back to 1 to finish at their final width and height (giving the over-expanding easing effect). 

.circles .circle-one
{
    height:120px;
    width:120px;
    border-radius:50%;
    background-color:#1885b2;
    top:100px;
    z-index:2;
    font-size:18px;
}
.circles .circle-two
{
    height:250px;
    width:250px;
    border-radius:50%;
    background-color:#de2078;
    left:55px;
    font-size:30px;
}

.circles > div
{
    position:relative;
    -webkit-transform: scale(0);
    transform: scale(0);
    position:absolute;
    animation: circles-load 1s cubic-bezier(0.17, 0.67, .58, 1.2);
    animation-fill-mode:forwards;
    animation-delay: 2s;
    -webkit-animation: circles-load 1s cubic-bezier(0.17, 0.67, .58, 1.2);
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2s;
}

.circles .text
{
    position:absolute;
    top:30%;
    right:15%;
    color:#fff;
}

@keyframes circles-load
{
    50%
    {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes circles-load
{
    50%
    {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

CSS Bar Charts

HTML

Again, fairly straight forward markup for the bar chart - a container and then a div for each bar:

<div class="h-bars">
    <div class="bar-one"></div>
    <div class="bar-two"></div>
    <div class="bar-three"></div>
    <div class="bar-four"></div>
    <div class="bar-five"></div>
    <div class="clear"></div>
</div>

CSS

While quite a simple effect for the bars, the CSS code is quite repetitive - the below code demonstrates the global code required, and then the styling and animation for the first bar (for full code view the demo source). 

.h-bars > div
{
    width:0;
    height:30px;
    margin-right:10px;
    border-radius: 2px;
    display:block;
    position:relative;
}

.h-bars *:before
{
    position: absolute;
    left:-100px;
    top:4px;
    opacity:0;
}

.h-bars *:after
{
    right:-90px;
    top:4px;
    opacity:0;
    position:absolute;
}

@keyframes bars-after
{
    from { opacity:0; }
    to { opacity:1;}
}

@-webkit-keyframes bars-after
{
    from { opacity:0; }
    to { opacity:1;}
}

.h-bars .bar-one:before
{
    content: 'Facebook';
    animation: bars-after 1s;
    animation-delay: 2.5s;
    animation-fill-mode:forwards;
    -webkit-animation: bars-after 1s;
    -webkit-animation-delay: 2.5s;
    -webkit-animation-fill-mode:forwards;
}

.h-bars .bar-one
{
    background-color:#1645c8;
    animation: bars-bar-one 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.5s;
    -webkit-animation: bars-bar-one 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.5s;
}

.h-bars .bar-one:after
{
    content: '1.15 Billion';
    animation: bars-after 1s;
    animation-fill-mode:forwards;
    animation-delay: 2.5s;
    -webkit-animation: bars-after 1s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-delay: 2.5s;
}

@keyframes bars-bar-one
{
    from { width:0; }
    to { width:450px;}
}

@-webkit-keyframes bars-bar-one
{
    from { width:0; }
    to { width:450px;}
}
Sign Up

NEXT: Pure CSS Loading Spinners

Nobody likes waiting for things to load, but with some creative spinner effects you can help to make the wait a little less boring. In this tutorial we're going to look at how you can create some advanced spinners using only CSS.

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.