Mengapakah animasi putaran CSS3 saya tidak berfungsi dalam Chrome?

Animasi Putaran CSS3 Tidak Berfungsi

Anda mengalami masalah untuk membolehkan animasi putaran CSS3 berfungsi, walaupun menggunakan keluaran stabil terkini Chrome.

Punca Punca:

Untuk menggunakan Animasi CSS3 dengan berkesan, anda juga mesti mentakrifkan bingkai kunci animasi menggunakan peraturan @keyframes. Anda belum lagi mentakrifkan kerangka utama ini untuk animasi "putaran" anda.

Sintaks Markdown untuk Jawapan:

<p>To use CSS3 Animation you must also define the actual animation keyframes (<em>which you named spin</em>)</p>
<p>Read https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations for more info</p>
<blockquote>
<p>Once you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.</p>
</blockquote>

Demo Fiddle dikemas kini:

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class='brush:php;toolbar:false;'>div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

<div></div>