Multiple CSS Animation Test
focused on scaling from .1 to 1

... and what browsers do ...

The HTML

<div class="container">
    <div class="spinnerOuterBox">
        <div class="spinner"></div>
    </div>
</div>

The main styles

.container { position: relative;
    border: 1px dotted darkslategray;
}
.spinnerOuterBox { position: absolute;
    width: 50px; height: 50px;
}
.spinner { position: absolute;
    width: 50px; height: 50px;
    background: url(images/smiley-50x50.png);
    border-radius: 50%;
}

.move { left: 0;
    animation: 5s move ease-in-out alternate infinite
}
@keyframes move {
    to {left: 250px}
}

.scale { transform: scale(.1);
    animation: 5s scale ease-in-out alternate infinite
}
@keyframes scale {
    to {transform: scale(1)}
}

.spinning { transform: rotate(0deg);
    animation: 1.5s spinning linear infinite
}
@keyframes spinning {
    to {transform: rotate(360deg)}
}

Circumstances

Test 1, 2, 3: the individual animations

Test 4: the desired combination

Test 5: trying a CSS delay on the spinner

Test 6: trying a CSS delay on the outer box

Test 7: trying a CSS hack on the spinner

.spinningBlinkHack {
    animation:
        .01s spinning linear forwards,
        1.5s .02s spinning linear infinite;
}

Test 8: repairing FF with a javascript "hard delay"
(forced animation properties after 30ms)

<div class="spinner spinningBlinkHack"
    id="jsDelay30ms"></div> <script>
function spinnerJSdelay30ms() {
document.getElementById("jsDelay30ms").style.animation
    = "1.5s spinning linear infinite";
}
setTimeout(spinnerJSdelay30ms, 30);
</script>

Test 9: trying Blink with longer javascript delay (50ms)

<div class="spinner spinningBlinkHack"
    id="jsDelay50ms"></div> <script>
function spinnerJSdelay50ms() {
document.getElementById("jsDelay50ms").style.animation
    = "1.5s spinning linear infinite";
}
setTimeout(spinnerJSdelay60ms, 50);
</script>

Test 10: trying Blink with long javascript delay
(100ms)

<div class="spinner spinningBlinkHack"
    id="jsDelay100ms"></div> <script>
function spinnerJSdelay100ms() {
document.getElementById("jsDelay100ms").style.animation
    = "1.5s spinning linear infinite";
}
setTimeout(spinnerJSdelay100ms, 100);
</script>

Attention!
While javascript is not reliable in timing (depends on possible other running scripts or processing tasks; for instance the Developer Tools), security margins will be needed; and testing in reality!

Test 11: result with security time gap and smooth start of javascript delay (1000ms)

<div class="spinner spinningBlinkHack"
    id="jsDelay1000ms"></div> <script>
function spinnerJSdelay1000ms() {
document.getElementById("jsDelay1000ms").style.animation
    = "1.5s spinning ease-in 1,
       1.5s 1.5s spinning linear infinite";
      // slow start first turn, normal after first turn
}
setTimeout(spinnerJSdelay1000ms, 1000);
</script>

Test 12: now applying the same javascript delay (1000ms) without the CSS hack: AHA!

<div class="spinner" id="jsDelay1000msNohack"></div>

<  back to CSS spinner recommendations