Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung der Übergangsanimationseigenschaft in CSS3
Detaillierte Erläuterung der Verwendung der Übergangsanimationseigenschaft in CSS3
- 高洛峰Original
- 2017-03-08 13:27:271711Durchsuche
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!