Heim  >  Artikel  >  Web-Frontend  >  Warum funktioniert meine CSS3-Spin-Animation in Chrome nicht?

Warum funktioniert meine CSS3-Spin-Animation in Chrome nicht?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-29 22:11:29685Durchsuche

Why is my CSS3 spin animation not working in Chrome?

CSS3-Spin-Animation funktioniert nicht

Es treten Probleme bei der Funktion der CSS3-Spin-Animation auf, obwohl Sie die neueste stabile Version von Chrome verwenden.

Grundursache:

Um CSS3-Animation effektiv zu nutzen, müssen Sie auch Animations-Keyframes mithilfe der @keyframes-Regel definieren. Sie haben diese Keyframes für Ihre „Spin“-Animation noch nicht definiert.

Markdown-Syntax für Antwort:

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

Aktualisierte 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);
    }
}
<div></div>

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine CSS3-Spin-Animation in Chrome nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn