Informationen zur CSS3-Animation zum Erzielen eines Frame-für-Frame-Animationseffekts-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Informationen zur CSS3-Animation zum Erzielen eines Frame-für-Frame-Animationseffekts

不言

Jun 20, 2018 pm 05:19 PM

animationcss

In diesem Artikel wird hauptsächlich die CSS3-Animation vorgestellt, um einen Frame-für-Frame-Animationseffekt zu erzielen, der einen gewissen Referenzwert hat.

Das Animationsattribut in CSS3 ist sehr leistungsfähig, aber Sie können es verwenden Es ist relativ selten, ich wurde kürzlich in einem Interview danach gefragt. Ich werde eine kurze Zusammenfassung der Animation erstellen, solange ich noch Zeit habe. Gleichzeitig wird eine Demo der Frame-by-Frame-Animation als Übung implementiert

Liste der Animationsattribute

Da es viele Animationsattribute gibt, ist dies der Fall Es ist etwas schmerzhaft, es in w3c zu sehen, also habe ich es einfach gemacht Eine Karte, Sie können es deutlich sehen, wenn Sie es später überprüfen möchten

Animation verwenden Um eine Frame-für-Frame-Animation zu erreichen

Mach dich mit den Eigenschaften der Animation vertraut. Danach muss ich ein einfaches kleines Projekt finden, das ich umsetzen kann. Lasst uns loslegen Eines zuerst, um mich selbst zufriedenzustellen
Die Idee ist sehr einfach: Geben Sie dem Element einen Sprite-Hintergrund und fügen Sie dann die Rahmenanimation hinzu, um die Hintergrundposition zu ändern. Schlüsselcode:

@keyframes run{   
    from{   
        background-position: 0 0;   
    }   
    to{   
        background-position: -1540px 0 ;   
    }   
}   
p{   
    width:140px;   
    height:140px;   
    background: url(run.png) ;   
    animation-name：run;   
    animation-duration:1s;   
    animation-iteration-count:infinite;   
}

Aber nachdem wir es ausgeführt hatten, stellten wir fest, dass die Frame-Animation zwischen den einzelnen Frames der Animation gleitet, was nicht der gewünschte Effekt ist. Warum?
Es stellt sich heraus, dass Animationsübergänge standardmäßig im Erleichterungsmodus erfolgen, der zwischen jedem Schlüsselbild eine Tweening-Animation einfügt, sodass der Animationseffekt konsistent ist.
Es ist leicht zu lösen, wenn Sie den Grund kennen. Die Lösung ist:

@keyframes run{   
    0%, 8%{  /*动作一*/  }   
    9.2%, 17.2%{  /*动作二*/  }   
    ...   
}

Schritt 1: Bleiben Sie 8 Frames zwischen den Aktionen, 0 % setzt Aktion eins, Aktion eins endet bei 8 %
Schritt 2: Übergang zwischen Aktionen für 1,2 Frames, 9,2 % setzt Aktion zwei, Aktion zwei Endete bei 17,2 %

Vollständiger Code:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css3逐帧动画</title>  
    <style>  
    @keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    @-webkit-keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    p{   
        width:140px;   
        height:140px;   
        background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;   
        animation:run 1s infinite;   
            -webkit-animation:run 1s infinite;   
        animation-fill-mode : backwards;   
            -webkit-animation-fill-mode : backwards;   
    }   
    </style>  
</head>  
<body>  
    <p></p>  
</body>  
</html>

Es gibt eine andere Implementierungsmethode, nämlich die Verwendung von „steps()“, also der Schrittanimation dazwischen Frames, das ist nicht in w3c geschrieben, posten wir zuerst ein Bild

Wie aus dem obigen Bild ersichtlich ist:

Schritte(1 ,start): Animation 1 Sprung auf 100 % vom Anfang bis zum Ende dieses Frames (nicht des gesamten Zyklus)
steps(1,end): Behalten Sie den 0 %-Stil bis zum Ende dieses Frames bei (nicht den gesamten Zyklus). Zyklus)

Außerdem können Sie die Animations-Timing-Funktion direkt einstellen: Schrittstart/Schrittende
Der Schrittstarteffekt entspricht „steps(1,start)“, der Schrittendeffekt entspricht Schritte (1, Ende)

Endlich Der Effekt: Da das Aufnahmeproblem möglicherweise etwas verzögert ist, können interessierte Schüler den Code direkt kopieren und ausführen:

Vollständiger Code:

<!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>css3逐帧动画</title>  
        <style>  
        @keyframes run{   
            0%{   
                background-position: 0 0;   
            }   
            8.333%{   
                background-position: -140px 0;   
            }   
            16.666%{   
                background-position: -280px 0 ;   
            }   
            25.0%{   
                background-position: -420px 0 ;   
            }   
            33.333%{   
                background-position: -560px 0 ;   
            }   
            41.666%{   
                background-position: -700px 0 ;   
            }   
            50.0%{   
                background-position: -840px 0 ;   
            }   
            58.333%{   
                background-position: -980px 0 ;   
            }   
            66.666%{   
                background-position: -1120px 0 ;   
            }   
            75.0%{   
                background-position: -1260px 0 ;   
            }   
            83.333%{   
                background-position: -1400px 0 ;   
            }   
            91.666%{   
                background-position: -1540px 0 ;   
            }   
            100%{   
                background-position: 0 0 ;   
            }   
        }   
        @-webkit-keyframes run{   
            0%{   
                background-position: 0 0;   
            }   
            8.333%{   
                background-position: -140px 0;   
            }   
            16.666%{   
                background-position: -280px 0 ;   
            }   
            25.0%{   
                background-position: -420px 0 ;   
            }   
            33.333%{   
                background-position: -560px 0 ;   
            }   
            41.666%{   
                background-position: -700px 0 ;   
            }   
            50.0%{   
                background-position: -840px 0 ;   
            }   
            58.333%{   
                background-position: -980px 0 ;   
            }   
            66.666%{   
                background-position: -1120px 0 ;   
            }   
            75.0%{   
                background-position: -1260px 0 ;   
            }   
            83.333%{   
                background-position: -1400px 0 ;   
            }   
            91.666%{   
                background-position: -1540px 0 ;   
            }   
            100%{   
                background-position: 0 0 ;   
            }   
        }   
        p{   
            width:140px;   
            height:140px;   
            background: url(754767/201606/754767-20160601000042992-1734972084.png) ;   
            animation:run 1s steps(1, start) infinite;   
                -webkit-animation:run 1s steps(1, start) infinite;   
        }   
        </style>  
    </head>  
    <body>  
        <p></p>  
    </body>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist die chinesische PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie CSS3-Box-Reflect, um einen Reflexionseffekt zu erstellen

Über das Animationsattribut in CSS So verwenden Sie

Das obige ist der detaillierte Inhalt vonInformationen zur CSS3-Animation zum Erzielen eines Frame-für-Frame-Animationseffekts. 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

Verwandter Artikel

Wohin sollte 'Podcast' -Link abonnieren?Apr 16, 2025 pm 12:04 PM

Für eine Weile war iTunes der große Hund im Podcasting. Wenn Sie also "Abonnieren Sie Podcast" verlinkt haben, um zu mögen:

Browser -MotorvielfaltApr 16, 2025 pm 12:02 PM

Wir haben die Oper verloren, als sie 2013 Chrome gingen. Gleiches Geschäft mit Edge, als es Anfang dieses Jahres auch Chrome ging. Mike Taylor nannte diese Veränderungen a "abnehmend

UX -Überlegungen zur WebfreigabeApr 16, 2025 am 11:59 AM

Von trashigen Clickbait -Websites bis hin zu den meisten August der Veröffentlichungen sind die Teilen von Schaltflächen seit langem im gesamten Web allgegenwärtig. Und doch ist es wohl diese diese

Wöchentliche Plattformnachrichten: Apple bereitet Webkomponenten, progressives HTML-Rendering, selbsthosting kritische Ressourcen bereitApr 16, 2025 am 11:55 AM

In der Roundup der Woche geht Apple in Webkomponenten, wie Instagram Insta-Loading-Skripte und einige Lebensmittel für das Denken für selbsthosting kritische Ressourcen sind.

Git pathspecs und wie man sie benutztApr 16, 2025 am 11:53 AM

Als ich die Dokumentation von Git -Befehlen durchschaut hatte, bemerkte ich, dass viele von ihnen eine Option hatten. Ich dachte anfangs, dass dies nur ein war

Ein Farbwähler für ProduktbilderApr 16, 2025 am 11:49 AM

Klingt ein bisschen wie ein schweres Problem. Ist es nicht? Wir haben oft keine Produktaufnahmen in Tausenden von Farben, sodass wir das mit dem mit umdrehen können. Wir auch nicht

Ein dunkler Modus wechselt mit React und ThemeProviderApr 16, 2025 am 11:46 AM

Ich mag es, wenn Websites eine dunkle Modusoption haben. Der dunkle Modus erleichtert mir das Lesen von Webseiten und hilft meinen Augen, sich entspannter zu fühlen. Viele Websites, einschließlich

Einige praktisch mit dem HTML-DialogelementApr 16, 2025 am 11:33 AM

Ich schaue mir das HTML -Element zum ersten Mal an. Ich habe es für eine Weile dessen bewusst, aber Haven ' Es wurde es noch nicht für einen Dreh genommen. Es hat einige ziemlich cool und

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vorByDDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat -Befehle und wie man sie benutzt

4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.