Detaillierte Erläuterung der Verwendung der Übergangsanimationseigenschaft in CSS3-CSS-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung der Übergangsanimationseigenschaft in CSS3

高洛峰

Freigeben： 2017-03-08 13:27:27

Original

1703 Leute haben es durchsucht

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>

Nach dem Login kopieren

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:

CSS3中Transition动画属性用法详解 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>

Nach dem Login kopieren

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:

CSS3中Transition动画属性用法详解

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!