Play multiple CSS animations at the same time

http://stackoverflow.com/questions/26986129/play-multiple-css-animations-at-the-same-time/26986205#comment42507479_26986205

by Emanuel Vecchio

HTML

<div class="spinner">
<img class="image image2" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>

CSS

.image {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation: scale 4s infinite linear;    
}

.spinner {
    position: relative;
    top: 150px;
    -webkit-animation: spin 2s infinite linear;
}


@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}