Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-10-29 22:11:29
Original
705 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!