Web-Frontend
CSS-Tutorial
Detaillierte Erläuterung der Verwendung der Übergangsanimationseigenschaft in CSS3
Detaillierte Erläuterung der Verwendung der Übergangsanimationseigenschaft in CSS3
Der W3C-Standard beschreibt den CSS3-Übergang wie folgt: „Der CSS-Übergang ermöglicht einen reibungslosen Übergang von CSS-Attributwerten innerhalb eines bestimmten Zeitintervalls. Dieser Effekt kann auftreten, wenn die Maus klickt, den Fokus erhält, angeklickt wird oder auf etwas Auslöser Änderungen am Element und reibungslose Änderung des CSS-Eigenschaftswerts mit Animationseffekt. „
Die Werte des Übergangsattributs umfassen die folgenden vier:
. •Übergangseigenschaft: Geben Sie an, welches CSS-Attribut des HTML-Elements die Übergangsverlaufsverarbeitung durchführen soll. Bei diesem Attribut kann es sich um verschiedene Standard-CSS-Attribute wie Farbe, Breite, Höhe usw. handeln.
•Übergangsdauer: Geben Sie die Dauer des Attributübergangs an.
•Übergangs-Timing-Funktion: Geben Sie die Geschwindigkeit des Farbverlaufs an:
1. Ease: (verlangsamt sich allmählich) Standardwert, die Ease-Funktion entspricht der Bessel-Er-Kurve (0,25, 0,1, 0,25, 1,0); linear: (gleichmäßige Geschwindigkeit), lineare Funktion entspricht der Bezier-Kurve (0,0, 0,0, 1,0, 1,0); Ease-in: (Accelerate), die Ease-in-Funktion entspricht der Bezier-Kurve (0,42, 0, 1,0, 1,0);
4: (Decelerate), die Ease-out-Funktion entspricht die Bezier-Kurve (0, 0, 0,58, 1,0);
5. Die Easy-In-Out-Funktion entspricht der Bezier-Kurve (0,42, 0, 0,58). , 1,0);
6 , Kubik-Bezier: (Mit diesem Wert können Sie eine Zeitkurve anpassen), eine bestimmte Kubik-Bezier-Kurve. Die vier Werte (x1, y1, x2, y2) gelten spezifisch für die Punkte P1 und P2 auf der Kurve. Alle Werte müssen im Bereich [0, 1] liegen, sonst sind sie ungültig.
•Übergangsverzögerung: Geben Sie die Verzögerungszeit an, d. h. wie lange es dauert, bis der Übergangsprozess beginnt.
Browserkompatibilität
Internet Explorer 9 und frühere Versionen unterstützen das Übergangsattribut nicht.
Internet Explorer 10, Firefox, Opera und Chrome unterstützen das Übergangsattribut. Chrome 25 und früher sowie Safari erfordern das Präfix -webkit-.
Das Folgende ist ein Beispiel, um die Verwendung des Übergangs zu veranschaulichen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition演示1</title>
<style type="text/css">
.animated_p {
margin: 100px auto;
width:100px;
height:60px;
background:#92B901;
/*简写属性*/
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */
/*每个属性分开写*/
transition-property:width,height,transform,background,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
-webkit-border-radius:5px;
border-radius:5px;
opacity:0.4;
}
.animated_p:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:200px;
height:120px;
}
</style>
</head>
<body>
<p class="animated_p"></p>
</body>
</html>Wenn sich die Maus im obigen Code auf p bewegt, werden die CSS-Attribute Breite und Höhe angezeigt , Transformations-, Hintergrund-, Deckkraft- und Verlaufsübergangseffekte treten auf. Schließlich wird der CSS-Stil zum in .animated_p definierten Stil. Der Übergangsprozess ist ungefähr wie folgt:
Geben Sie mir ein weiteres Online-Beispiel für Chang'e, der zum Mond fliegt. Die Anforderungen sind: Wenn die Maus über das Bild bewegt wird. Wenn es nach oben bewegt wird, erscheint Chang'e, und wenn es wegbewegt wird, verschwindet Chang'e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition演示2</title>
<style type="text/css">
body{
color: #fff;
background:#000;
}
.change{
display:block;
width:400px;
height:400px;
background:url(http://www.php.cn/) no-repeat center;
background-size:cover;
border:1em solid rgba(255,255,255,.8);
margin:50px auto;
}
.change img{
display:block;
width:300px;
height:284px;
opacity:0;
-webkit-transform:translate(-100px,-100px);
transform:translate(-100px,-100px);
-webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
}
.change:hover img{
-webkit-transform:translate(0px,0px);
transform:translate(0px,0px);
opacity:1;
}
</style>
</head>
<body>
<a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
<img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
</a>
</body>
</html>In der Reihenfolge Damit Chang'e den Effekt des Ein- und Ausschwebens hat, wird das Transformationsattribut in Kombination mit dem Deckkraftattribut festgelegt und der Übergangseffekt hinzugefügt. Kann den Effekt erzielen:
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Übergangsanimationseigenschaft in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten?
Apr 02, 2025 pm 06:17 PM
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass
Apr 03, 2025 am 10:30 AM
Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.
Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor
Apr 02, 2025 am 04:27 AM
Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?
Vergleich von Browsern für reaktionsschnelles Design
Apr 02, 2025 pm 06:25 PM
Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben
Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet?
Apr 05, 2025 pm 05:51 PM
Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...
