CSS3 implementiert die Animation zum Erweitern und Reduzieren der Seitenleiste

In diesem Artikel wird hauptsächlich die Verwendung von CSS3 zum Implementieren der Animation zum Erweitern und Reduzieren der Seitenleiste beschrieben. Er ist sehr detailliert und wird Freunden empfohlen, die ihn benötigen.

@keyframes

Regeln werden zum Erstellen von Animationen verwendet.

Geben Sie einen bestimmten CSS-Stil in @keyframes an, um einen Animationseffekt zu erstellen, der sich schrittweise vom aktuellen Stil in einen neuen Stil ändert.

Wenn Sie eine Animation in @keyframes erstellen, binden Sie diese bitte an einen Auswahlgerät, sonst wird der Animationseffekt nicht erzeugt.

Animationen können an den Selektor gebunden werden, indem mindestens zwei der folgenden CSS3-Animationseigenschaften angegeben werden:

Geben Sie den Namen der Animation an.
Geben Sie die Dauer der Animation an.
animation Das
animation-Attribut ist ein Kurzattribut zum Festlegen von Animationsattributen:

animation-name: Gibt den Namen der @keyframes-Animation an.
Animationsdauer: Gibt die Sekunden oder Millisekunden an, die die Animation benötigt, um einen Zyklus abzuschließen. Der Standardwert ist 0.
animation-timing-function: Gibt die Geschwindigkeitskurve der Animation an. Der Standardwert ist „einfach“.
animation-delay: Gibt an, wann die Animation startet. Der Standardwert ist 0
animation-iteration-count: Gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist 1.
animation-direction: Gibt an, ob die Animation im nächsten Zyklus rückwärts abgespielt wird. Der Standardwert ist „normal“.
animation-fill-mode: Gibt den Zustand außerhalb der Objektanimationszeit an

Sidebar-Implementierung

/* 动画定义 */
@-webkit-keyframes move_right {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}
@keyframes move_right {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(120px);
        transform: translateX(120px);
    }
}
@-webkit-keyframes move_left {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
}
@keyframes move_left {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
}
@-webkit-keyframes move_up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}
@keyframes move_up {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}

/* 动画绑定 */
 .move_right {
     -webkit-animation-name            : move_right;
     animation-name            : move_right;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .move_left {
     -webkit-animation-name            : move_left;
     animation-name            : move_left;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .move_up {
     -webkit-animation-name            : move_up;
     animation-name            : move_up;
     -webkit-animation-duration        : 1s;
     animation-duration        : 1s;
     -webkit-animation-iteration-count : 1;
     animation-iteration-count : 1;
     -webkit-animation-fill-mode : forwards;
     animation-fill-mode : forwards;
 }
 .fadeIn {
     -webkit-transform : translateX(120px);
     transform : translateX(120px); 
     opacity: 1;
 }
 .fadeInUp {
     -webkit-transform : translateY(-250px);
     transform : translateY(-250px);
     opacity: 1;
     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
     transition :transform .2s ease-out, opacity .2s ease-out;
 }
 .fadeOutLeft {
     -webkit-transform : translateX(-120px);
     transform : translateX(-120px); 
     opacity: 0.0;
     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 
     transition :transform .2s ease-out, opacity .2s ease-out;
 }

html

<!doctype html>
 <html lang="en" class="fullHeight">
 <head>
     <meta charset="UTF-8">
     <title>demo</title>
     <link rel="stylesheet" type="text/css" href="sidebar.css">
 </head>
 <body class="fullHeight">
     <p class=&#39;sidebar fullHeight&#39;>sidebar</p>
     <p class="controller">
         <p>
             <button onclick="fadeIn()">淡进</button>
             <button onclick="fadeOut()">淡出</button>
         </p>
         <p>
             <button onclick="fadeInUp()">向上淡进</button>
             <button onclick="fadeOutLeft()">向左淡出</button>
         </p>
     </p>
     <script src="sidebarEffects.js"></script>
 </body>
 </html>

JS hinzufügen

<script>
 var sidebarEl = document.querySelector(".sidebar");
 function fadeIn (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;0px&#39;;
     sidebarEl.classList.add(&#39;move_right&#39;);
 }
 function fadeOut (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 function fadeInUp(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;250px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_up&#39;);
 }
 function fadeOutLeft(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 </script>

Das Obige ist der gesamte Inhalt und Code für die Verwendung von CSS3 zum Erstellen von Seitenleisten-Animationseffekten, die Freunde entsprechend ihren eigenen Projektanforderungen verbessern und verschönern können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So zeichnen Sie eine Ladekreisanimation mit CSS3

So richten Sie CSS ein Textschriftfarbe

Das obige ist der detaillierte Inhalt vonCSS3 implementiert die Animation zum Erweitern und Reduzieren der Seitenleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!