Die CSS3-Animation implementiert eine Beispieleinführung für einen Frame-für-Frame-Animationseffekt-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Die CSS3-Animation implementiert eine Beispieleinführung für einen Frame-für-Frame-Animationseffekt

高洛峰

Mar 09, 2017 pm 05:11 PM

animationcss

Dieser Artikel stellt hauptsächlich CSS3-Animationen vor, um Beispiele für Frame-für-Frame-Animationseffekte zu erzielen. Interessierte Freunde können darauf verweisen.

Das Animationsattribut in CSS3 ist sehr leistungsfähig, aber ich Benutze es selten. Ich wurde kürzlich in einem Interview danach gefragt. Ich werde eine kurze Zusammenfassung der Animation erstellen, sobald ich 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 auf einen Blick sehen, wenn Sie es später überprüfen möchten

CSS3 animation实现逐帧动画效果示例介绍

Verwenden Sie Animationen, um eine Frame-für-Frame-Animation zu erzielen

Machen Sie sich mit den Eigenschaften der Animation vertraut. Danach muss ich ein einfaches kleines Projekt finden, das ich umsetzen kann. Frame-für-Frame-Animation ist so interessant. Lassen Sie uns zuerst eines ausführen, 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;   
}

CSS3 animation实现逐帧动画效果示例介绍

Aber nachdem wir es ausgeführt hatten, stellten wir fest, dass die Frame-Animation zwischen den einzelnen Frames der Animation verschiebbar ist und nicht den gewünschten Effekt hat. 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, setzen Sie Aktion eins auf 0 %, beenden Sie Aktion eins auf 8 %

Schritt 2: Übergang zwischen Aktionen für 1,2 Frames , 9,2 % setzt Aktion zwei und Aktion zwei endet 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 Schritten( ), das ist Schrittanimation zwischen Frames, dies ist nicht in w3c geschrieben, poste zuerst ein Bild

CSS3 animation实现逐帧动画效果示例介绍

Wie aus dem obigen Bild ersichtlich ist:

Schritte (1,Start): Vom Anfang der Animation bis zum Ende dieses Frames auf 100 % springen (nicht den gesamten Zyklus)
Schritte (1,Ende): Behalten Sie den 0 %-Stil bis zum Ende dieses Frames bei (nicht der gesamte Zyklus)

Darüber hinaus können Sie die Animations-Timing-Funktion auch direkt festlegen: Schrittstart/Schrittende
Der Schrittstart-Effekt entspricht den Schritten (1,Start) , und der Schritt-End-Effekt entspricht Schritten (1, Ende)

Endeffekt: Da das Aufzeichnungsproblem 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>

CSS3 animation实现逐帧动画效果示例介绍

Ich hoffe, dass es für alle hilfreich ist Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Das obige ist der detaillierte Inhalt vonDie CSS3-Animation implementiert eine Beispieleinführung für einen Frame-für-Frame-Animationseffekt. 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

IndieWeb und WebmentionsApr 19, 2025 am 11:16 AM

Das IndieWeb ist eine Sache! Sie haben eine Konferenz und alles bekommen. Der New Yorker schreibt sogar darüber:

Das (Entwickler) WachstumsmodellApr 19, 2025 am 11:08 AM

Ich mag den Beitrag "The Designer's Growth Model" von Dennis Hambeuker sehr. Dennis hat gerade dieses Modell erfunden, aber es basiert auf einigen vorhandenen Ideen und alles

Haunted: Haken für WebkomponentenApr 19, 2025 am 11:06 AM

Ich unterhielt mich nur mit Dave und er erzählte mir von Haunted. Es ist Haken, aber für native Webkomponenten! Ziemlich cool. Ich denke die Existenz solcher Sachen

Wöchentliche Plattformnachrichten: Event Timing, Google Earth für Web, Untote -Sitzungs -CookiesApr 19, 2025 am 10:57 AM

In den Nachrichten dieser Woche hilft Wikipedia dabei, drei langsame Klick -Handler zu identifizieren, Google Earth kommt ins Web, SVG -Eigenschaften in CSS erhalten mehr Unterstützung und was im Falle von Zombie -Cookies zu tun ist.

Multi-Line-Kürzung mit reinem CSSApr 19, 2025 am 10:50 AM

Der Trick in diesem Artikel ist immer noch ziemlich ordentlich und klug, aber es gibt eine jetzt standardisierte Möglichkeit, dies zu tun, was wahrscheinlich die beste Wahl ist.

CSS -AnimationsbibliothekenApr 19, 2025 am 10:46 AM

Es gibt eine Menge Bibliotheken, die Ihnen helfen möchten, Dinge im Internet zu animieren. Diese sind nicht wirklich Bibliotheken, die Ihnen bei der Syntax oder der

Farbeingänge: Ein tiefes Eintauchen in die Unterschiede in KreuzbrowserApr 19, 2025 am 10:40 AM

In diesem Artikel werden wir uns die Struktur innerhalb von Elementen, Browser -Inkonsistenzen, warum sie in einem bestimmten Browser auf eine bestimmte Art und Weise aussehen, und wie wir uns in einem bestimmten Browser aussehen, und wie

Einschränkung eines (Pseudo) ElementApr 19, 2025 am 10:39 AM

Wollten Sie schon immer sicherstellen, dass außerhalb der Grenzbox des Elternteils nichts von einem (Pseudo) Element angezeigt wird? Falls Sie Probleme haben, sich vorzustellen, was

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

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

3 Wochen vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vorByDDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vorByDDD

Ersparnis in R.E.P.O. Erklärt (und speichern Dateien)

1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Assassins Creed Shadows - So finden Sie den Schmied und entsperren Sie die Waffen- und Rüstungsanpassung

4 Wochen vorByDDD

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.