Why is my CSS3 spin animation not working in Chrome?

CSS3 Spin Animation Not Functioning

You're experiencing issues getting CSS3 spin animation to function, despite using the latest stable release of Chrome.

Root Cause:

To utilize CSS3 Animation effectively, you must also define animation keyframes using the @keyframes rule. You have not yet defined these keyframes for your "spin" animation.

Markdown Syntax for Answer:

<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>

Updated Fiddle Demo:

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override">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);
    }
}</pre>
<pre class="snippet-code-html lang-html prettyprint-override"><div></div></pre>

The above is the detailed content of Why is my CSS3 spin animation not working in Chrome?. For more information, please follow other related articles on the PHP Chinese website!