END

by AaronLayton

HTML

<div class="sprite-question-box-small"></div>

CSS

.sprite-question-box{
    height:15px;
    width:15px;
    
    -webkit-animation: question-box-idle 0.8s linear infinite;
}

@-webkit-keyframes question-box-idle {
    0%    { box-shadow:15px 0 0 #d8b018, 30px 0 0 #d8b018, 45px 0 0 #d8b018, 60px 0 0 #d8b018, 75px 0 0 #d8b018, 90px 0 0 #d8b018, 105px 0 0 #d8b018, 120px 0 0 #d8b018, 135px 0 0 #d8b018, 150px 0 0 #d8b018, 165px 0 0 #d8b018, 180px 0 0 #d8b018, 195px 0 0 #d0a820, 210px 0 0 #d0a820, 0 15px 0 #d8b018, 15px 15px 0 #e8c030, 30px 15px 0 #f8f8f8, 45px 15px 0 #f8f8f8, 60px 15px 0 #f8e888, 75px 15px 0 #f8e888, 90px 15px 0 #f8e888, 105px 15px 0 #f8e888, 120px 15px 0 #f8e888, 135px 15px 0 #f8e888, 150px 15px 0 #f8e888, 165px 15px 0 #f8e888, 180px 15px 0 #f8d028, 195px 15px 0 #f8d028, 210px 15px 0 #c8a018, 225px 15px 0 #884810, 0 30px 0 #d8b018, 15px 30px 0 #f8e888, 30px 30px 0 #602800, 45px 30px 0 #e0b018, 60px 30px 0 #e0b018, 75px 30px 0 #e0b018, 90px 30px 0 #e0b018, 105px 30px 0 #e0b018, 120px 30px 0 #d8b018, 135px 30px 0 #d8b018, 150px 30px 0 #d8b018, 165px 30px 0 #d8b018, 180px 30px 0 #d0a820, 195px 30px 0 #602800, 210px 30px 0 #b08018, 225px 30px 0 #602800, 0 45px 0 #d8b018, 15px 45px 0 #f8e888, 30px 45px 0 #e0b018, 45px 45px 0 #e0b018, 60px 45px 0 #f8f8f8, 75px 45px 0 #f8f8f8, 90px 45px 0 #f8f8f8, 105px 45px 0 #f8f8f8, 120px 45px 0 #f8f8f8, 135px 45px 0 #f8f8f8, 150px 45px 0 #f8f8f8, 165px 45px 0 #f8f8f8, 180px 45px 0 #e0b018, 195px 45px 0 #d0a820, 210px 45px 0 #b08018, 225px 45px 0 #602800, 0 60px 0 #d8b018, 15px 60px 0 #f8d028, 30px 60px 0 #e0b018, 45px 60px 0 #f8f8f8, 60px 60px 0 #f8f8f8, 75px 60px 0 #f8f8f8, 90px 60px 0 #f8f8f8, 105px 60px 0 #f8f8f8, 120px 60px 0 #f8f8f8, 135px 60px 0 #f8f8f8, 150px 60px 0 #f8f8f8, 165px 60px 0 #f8f8f8, 180px 60px 0 #f8f8f8, 195px 60px 0 #884810, 210px 60px 0 #b08018, 225px 60px 0 #602800, 0 75px 0 #d8b018, 15px 75px 0 #f8d028, 30px 75px 0 #e0b018, 45px 75px 0 #f8f8f8, 60px 75px 0 #f8f8f8, 75px 75px 0 #f8f8f8, 90px 75px 0 #884810, 105px 75px 0 #884810, 120px 75px 0...

JavaScript

/*
    Single Element pure CSS Animated sprite
    Inspired by @_joshnh
    
    Original concept: http://jsfiddle.net/joshnh/23tAN/
*/