CSS3 beschleunigt und verzögert Übergänge

1. Verwenden Sie die Geschwindigkeitskontrollfunktion, um die Geschwindigkeitskurve des Übergangseffekts (Beschleunigung, Verzögerung usw.) zu steuern.

Mithilfe der Geschwindigkeitsregelungsfunktion lässt sich der Geschwindigkeitsverlauf des Übergangseffekts einstellen, so dass der Übergangseffekt seine Geschwindigkeit mit der Zeit ändert. Beispiele: langsam starten und dann beschleunigen oder schnell starten und dann langsamer werden.

(1) CSS3 definiert die folgenden Geschwindigkeitskontrollfunktionen:

linear gibt einen Übergangseffekt an, der mit der gleichen Geschwindigkeit beginnt und endet (entspricht cubic-bezier(0,0,1,1)).
ease gibt einen Übergangseffekt an, der langsam beginnt, dann schneller wird und schließlich langsam endet (cubic-bezier(0.25,0.1,0.25,1)).
ease-in gibt einen Übergangseffekt an, der langsam beginnt (entspricht cubic-bezier(0.42,0,1,1)).
ease-out gibt einen Übergangseffekt an, der langsam endet (entspricht cubic-bezier(0,0,0.58,1)).
ease-in-out gibt einen Übergangseffekt an, der langsam beginnt und endet (entspricht cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) definiert eigene Werte in der cubic-bezier-Funktion. Mögliche Werte sind Zahlen zwischen 0 und 1.

(2) Verwendung der Geschwindigkeitskontrollfunktion: Wenn Sie diese verwenden, platzieren Sie die Geschwindigkeitskontrollfunktion einfach nach dem Zeitparameter des Übergangsattributs. Wenn nicht ausgefüllt, wird die Standardgeschwindigkeitsregelungsfunktion (Ease) verwendet

Übergang: Deckkraft 10 s, sanftes Ein-Aus;

(3) Beispiel 1:
Die folgenden Beispiele veranschaulichen die Unterschiede in der Wirkung verschiedener Geschwindigkeitsregelungsfunktionen. Wenn Sie die Maus in das Feld bewegen, bewegt sich der Block innerhalb des Felds nach rechts. Gleichzeitig dreht sich der Block, die Ecken werden abgerundet und die Hintergrundfarbe sowie die Textfarbe ändern sich ebenfalls. Diese Stiländerungen haben einen Übergangseffekt und da unterschiedliche Geschwindigkeitskontrollfunktionen verwendet werden, ist auch die Übergangsgeschwindigkeit unterschiedlich.

<!doctype html>
<html lang="de">
    <Kopf>
    <Titel>hangge.com</Titel>
    <Stil>
        .trans_box {
            Polsterung: 20px;
            
            *Zoom:1;
        }
 
        .trans_list {
            Breite: 10%;
            Höhe: 64px;
            Rand: 10px 0;
            
            Farbe: #fff;
            Textausrichtung: zentriert;
        }
 
        .linear {
            -webkit-transition: alle 4s linear;
            -moz-Übergang: alle 4s linear;
            -o-Übergang: alle 4s linear;
            Übergang: alle 4s linear;
        }
 
        .Leichtigkeit {
            -webkit-transition: alle 4s leicht;
            -moz-transition: alle 4s leicht;
            -o-Übergang: alle Viere leicht;
            Übergang: alle Viere mühelos;
        }
 
        .ease_in {
            -webkit-transition: alle 4s erleichtern das Einsteigen;
            -moz-transition: alle 4s erleichtern den Einstieg;
            -o-Übergang: alle 4er langsam einsteigen;
            Übergang: alle Viere langsam einlenken;
        }
 
        .ease_out {
            -webkit-transition: alle 4s werden entspannt;
            -moz-transition: alle 4s locker raus;
            -o-Übergang: alle 4er lockern sich;
            Übergang: alle Viere lockern sich;
        }
 
        .ease_in_out {
            -webkit-transition: alle 4s erleichtern das Ein- und Aussteigen;
            -moz-transition: alle 4s erleichtern das Ein- und Aussteigen;
            -o-Übergang: alle 4er sanft ein- und ausfahren;
            Übergang: alle Viere langsam ein- und ausfahren;
        }
 
        .trans_box:hover .trans_list, .trans_box_hover .trans_list {
            Rand links: 89 %;
            
            Farbe: Nr. 333;
            -Webkit-Randradius: 25px;
            -moz-border-radius:25px;
            -o-Rahmenradius: 25px;
            Rahmenradius: 25px;    
            -webkit-transform: drehen (360 Grad);
            -moz-transform:drehen(360Grad);
            -o-transform: drehen (360 Grad);
            transformieren: drehen (360 Grad);             
        }
    </Stil>
</Kopf>
<div id="transBox" Klasse="trans_box">
    <div class="trans_list ease">Leichtigkeit<br>(Standard)</div>
    <div class="trans_list ease_in">Eingewöhnung</div>
    <div class="trans_list ease_out">Entspannung</div>
    <div class="trans_list ease_in_out">Einfach rein-raus</div>   
    <div class="trans_list linear">linear</div>
</div>
</html>

(4) Beispiel 2:

Nachfolgend wird der Unterschied in der Wirkung verschiedener Geschwindigkeitsregelungsfunktionen durch Veränderung der Breite des Balkendiagramms veranschaulicht.

<!DOCTYPE html>
<html>
<Kopf>
<Stil>
div
{
Rand: 10px 0;
Breite: 100px;
Höhe: 50px;
Hintergrund: #2D9900;
Farbe: weiß;
Schriftstärke: fett;
Übergang: Breite 2 s;
-moz-transition:Breite 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari und Chrome */
-o-Übergang:Breite 2s; /* Opera */
}
 
#div1 {Übergangszeitfunktion: linear;}
#div2 {Übergangszeitfunktion: Leichtigkeit;}
#div3 {Übergangszeitfunktion: ease-in;}
#div4 {Übergangszeitfunktion: ease-out;}
#div5 {Übergangszeitfunktion: ease-in-out;}
 
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: Leichtigkeit;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: Leichtigkeit-out;}
#div5 {-moz-transition-timing-function: Ein-Aus-Schalten;}
 
/* Safari und Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: Leichtigkeit;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: Leichtigkeit-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
 
/* Oper: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: Leichtigkeit;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: Ausstieg;}
#div5 {-o-transition-timing-function: Ein-Aus-Schalten;}
 
.trans_box:hover div
{
Breite: 500px;
}
</Stil>
</Kopf>
<Text>
<div id="transBox" Klasse="trans_box">    
    <div id="div2" style="top:150px">Leichtigkeit<br>(Standard)</div>
    <div id="div3" style="top:200px">Einführung</div>
    <div id="div4" style="top:250px">Ausklinken</div>
    <div id="div5" style="top:300px">Einfach rein-raus</div>
    <div id="div1" style="top:100px">linear</div>
</div>
</body>
</html>

2. Verzögerung zum Übergang hinzufügen

Übergangseigenschaften können auch eine optionale Verzögerung aufweisen, mit der der Beginn des Übergangs um einen bestimmten Zeitraum verzögert werden kann. Unten sehen Sie ein Beispiel, das 1 Sekunde wartet.
Verzögerung 1 Sekunde

<!doctype html>
<html lang="de">
    <Kopf>
    <Titel>hangge.com</Titel>
    <Stil>
        .trans_box3 {
            Polsterung: 20px;
            
            *Zoom:1;
        }
 
        .trans_box3 div{
            Breite: 100px;
            Höhe: 50px;
            Hintergrund: #2D9900;
            Farbe: weiß;
            Schriftstärke: fett;
 
            -webkit-transition: alle 2er werden durch 1er ersetzt;
            -moz-transition: alle 2er werden durch 1er ersetzt;
            -o-Übergang: alle 2er werden durch 1er ersetzt;
            Übergang: alle 2 s, alle 1 s auslaufend;
        }
 
        .trans_box3:hover div
        {
            Breite: 500px;
        }
    </Stil>
</Kopf>
<div Klasse="trans_box3"> 
    <div>Verzögerung 1 Sekunde</div>
</div>
</html>

Dies ist das Ende dieses Artikels über CSS3-Übergangsgeschwindigkeitssteuerung und -verzögerung. Weitere relevante Inhalte zu CSS3-Übergangsgeschwindigkeitssteuerung und -verzögerung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: So verwenden Sie eine Bildschaltfläche als Schaltfläche zum Zurücksetzen des Formulars

>>: JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt

CSS Houdini erzielt einen dynamischen Welleneffekt

MySQL 8.0.22 Zip-komprimierte Paketversion (kostenlose Installation) Download, Installations- und Konfigurationsschritte detailliert

Inhaltsverzeichnis Der erste Schritt besteht dari...

CSS3 beschleunigt und verzögert Übergänge

CSS Houdini erzielt einen dynamischen Welleneffekt

Ausführliche Erklärung verschiedener binärer Objektbeziehungen in JavaScript

Beispiele für die Verwendung von DD DT DL-Tags

Eine kurze Analyse der expliziten Typkonvertierung von MySQL

Führen Sie die Schritte zum Konfigurieren einer statischen IP-Adresse für eine virtuelle Linux-Maschine aus

Drücken Sie die Eingabetaste, um das Formular automatisch abzuschicken. Unerwartete Entdeckung

So beheben Sie das Problem mit der Fußzeile unten auf der Seite (mehrere Methoden)

MySQL-Wissenspunkte und häufig verwendete MySQL-Befehle für die Computerprüfung der zweiten Ebene

Tiefgreifendes Verständnis des Vue-Übergangs und der Animation

Beschreiben Sie kurz den Unterschied zwischen MySQL und Oracle

Artikel empfehlen

Grundlegende Verwendung des Befehls wget unter Linux

CentOS 6.5 Installations-Tutorial zu MySQL 5.7

Mehrere CSS3-Tag-Abkürzungen (empfohlen)

Mehrere Möglichkeiten zum Verbinden von Tabellen in MySQL

Lösung für das versehentliche Löschen von Daten in MySQL und Kill-Anweisungsprinzip

Detaillierte Erläuterung der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung

So kapseln Sie die Karussellkomponente in Vue3

MySQL 8.0.22 Zip-komprimierte Paketversion (kostenlose Installation) Download, Installations- und Konfigurationsschritte detailliert

Einführung in MySQL-Isolationsebene, Sperre und MVCC

Detaillierte Erklärung zur Verwendung der vue3 Teleport-Sofortbewegungsfunktion

So verwenden Sie die Baidu Map API im Vue-Projekt

Lokale Vue-Komponentendatenfreigabe Vue.observable()-Nutzung

So erstellen Sie einen SVN-Server unter Linux

Detaillierte Einführung in Robots.txt

Eine kurze Diskussion über die Synchronisierungslösung zwischen MySQL und Redis Cache