JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<div class="wrap-fox">
        <h2>Mozilla Firefox</h2>
        <div class="fox"></div>
    </div>

CSS

@-webkit-keyframes anim-raposa{
    from{
        background-position: -6864px 0;
    }to{
        background-position: 0 0;
    }
}
@-moz-keyframes anim-raposa{
    from{
        background-position: -6864px 0;
    }to{
        background-position: 0 0;
    }
}
@-ms-keyframes anim-raposa{
    from{
        background-position: -6864px 0;
    }to{
        background-position: 0 0;
    }
}
@-o-keyframes anim-raposa{
    from{
        background-position: -6864px 0;
    }to{
        background-position: 0 0;
    }
}
@keyframes anim-raposa{
    from{
        background-position: -6864px 0;
    }to{
        background-position: 0 0;
    }
}
.wrap-fox{
    background: #0097de;
    padding: 0 0 1em 0;
    text-align: center;
    color: #fff;
}
.fox {
    background: url('http://i.imgur.com/cvlTXqc.png') 0 0 no-repeat;    
    width: 156px;
    height: 156px;
    -webkit-animation: anim-raposa 3.5s steps(44) infinite;
       -moz-animation: anim-raposa 3.5s steps(44) infinite;
         -o-animation: anim-raposa 3.5s steps(44) infinite;
            animation: anim-raposa 3.5s steps(44) infinite;
    margin: 0 auto;
}