Wie verwende ich das Attribut „animation-name', um eine Animation aufzurufen? Anleitung zur Verwendung von CSS-Animationen

Bevor wir Animationen verwenden können, müssen wir Animationen mithilfe von Keyframes definieren. Wir benötigen jedoch das Attribut „animation-name“, um den Animationseffekt zu erzielen in CSS-Stilen, wie verwenden wir das Attribut „animation-name“, um es zu implementieren? Fassen wir zusammen, wie das Attribut „animation-name“ zum Aufrufen von Animationen verwendet wird? Eine vollständige Liste der Verwendung von CSS-Animationen.

Bevor wir den Animationseffekt implementieren, müssen wir zunächst das Attribut „animation-name“ verstehen:

Syntax des Attributs „animation-name“: Animation -name: Animationsname;

Hinweis: Wenn wir das Attribut „animation-name“ zum Definieren eines Dialogs verwenden, müssen wir Keyframes verwenden, um denselben Namen zu benennen Bei Inkonsistenz kann dies möglicherweise nicht der Fall sein. Um die Kompatibilität mit anderen Browsern zu gewährleisten, können wir ein Webkit-Präfix voranstellen.

Der Code lautet wie folgt:

<style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        @-webkit-keyframes mytransform
        {
            0%{border-radius:0;}
            50%{border-radius:50px; -webkit-transform:translateX(0);}
            100%{border-radius:50px; -webkit-transform:translateX(50px);}
        }
        div
        {
            width:100px;
            height:100px;
            background-color:red;
        }
        div:hover
        {
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>

Im obigen Code verwenden wir Keyframes, um zwei Animationen zu definieren, aber solange wir den Animationsnamen verwenden, um mytransform aufzurufen, dauert die mytransform-Animation In der Mytransform-Animation ändern wir im Div den Attributwert „border-radius“ von 0 auf 50 px und dann von 50 % auf 100 %, während wir das Attribut unverändert lassen und es horizontal verschieben rechts. 50px.

Viele Schüler werden diese Frage haben. Wir alle verwenden die Hover-Pseudoklasse, um die Animation zu implementieren, wenn wir die Webseite öffnen Ich möchte nur einen Animationseffekt haben. Wie setze ich ihn um?

Tatsächlich ist es auch sehr einfach, den Stil im Div zu finden, wo der Mauszeiger im Div bleibt, ihn zu entfernen und den Stil in den Stil des Div-Elements selbst zu ändern wird beim Öffnen nicht sofort abgespielt.

Wie verwende ich oben das Attribut „animation-name“, um eine Animation aufzurufen? Eine vollständige Einführung in die Verwendung von CSS-Animationen. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie verwende ich das Attribut „animation-name', um eine Animation aufzurufen? Anleitung zur Verwendung von CSS-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!