Gemeinsame CSS-Stile (4) Animation-HTML-Tutorial-php.cn

　Teil 3 Gängige CSS-Stile (3) In diesem Blogbeitrag wurde bereits der Übergang und die Transformation mit animierten Effekten in CSS vorgestellt. Lassen Sie uns heute über Animation in CSS sprechen. Durch das Hinzufügen von Animationen wird der Animationseffekt optimistischer.

　Animation

　 Die Implementierung von Animationen muss über Keyframes implementiert werden. Keyframes (Keyframes), ähnlich den Keyframes in Flash. Keyframes haben ihre eigenen Syntaxregeln. Ihre Benennung beginnt mit „@keyframes“, gefolgt vom „Namen der Animation“ plus einem Paar geschweifter Klammern „{}“. Ein bisschen wie unsere Schreibmethode im CSS-Stil. Für eine Stilregel in „@keyframes“, die aus mehreren Prozentsätzen besteht, beispielsweise zwischen „0 %“ und „100 %“, können wir in dieser Regel mehrere Prozentsätze erstellen und jedem Prozentsatz ein Element zuweisen, das Animationseffekte benötigt mit verschiedenen Attributen hinzugefügt, sodass die Elemente einen sich ständig ändernden Effekt erzielen können, z. B. Bewegen, Ändern der Farbe, Position, Größe, Form usw. des Elements. Beachten Sie jedoch, dass wir „fromt“ und „to“ verwenden können, um darzustellen, wo eine Animation beginnt und endet. Mit anderen Worten: „from“ entspricht „0 %“ und „to“ entspricht „100“. %“, es ist erwähnenswert, dass „0%“ das Prozentzeichen nicht wie andere Attributwerte weglassen kann. Wir müssen hier das Prozentzeichen („%“) hinzufügen. Wenn nicht, ist dieser Keyframe ungültig und hat keine Wirkung. Denn die Einheit Keyframes akzeptiert nur Prozentwerte.

Schreiben in verschiedenen Browsern:

内核类型	写法
Webkit(Chrome/Safari)	-webkit-animation
Gecko(Firefox)	-moz-animation
Presto(Opera)
Trident(IE)	-ms-animation
W3C	animation

Kerneltyp

Schreiben

Webkit (Chrome/Safari)

-webkit-animation

Gecko(Firefox)

-moz-animation

Presto(Oper)

Trident(IE)

-ms-animation

W3C

animation

　Attributbeschreibung:

1. Animationsname: Rufen Sie den auf das Objekt angewendeten Animationsnamen ab oder legen Sie ihn fest. Er muss in Verbindung mit der Regel @keyframes verwendet werden. Der Animationsname kann frei gewählt werden und die Semantik wird besser

2. Animationsdauer: Rufen Sie die Dauer der Objektanimation ab oder legen Sie sie fest

3. Animation-Timing-Funktion: Abrufen oder Festlegen des Übergangstyps der Objektanimation

Wert:

Linear: Linearer Übergang. Entspricht der Bezier-Kurve (0,0, 0,0, 1,0, 1,0)

Einfachheit: reibungsloser Übergang. Entspricht der Bezier-Kurve (0,25, 0,1, 0,25, 1,0)

Einstieg: von langsam nach schnell. Entspricht der Bezier-Kurve (0,42, 0, 1,0, 1,0)

Ease-out: von schnell nach langsam. Entspricht der Bezier-Kurve (0, 0, 0,58, 1,0)

ease-in-out: von langsam zu schnell und dann wieder langsam. Entspricht der Bezier-Kurve (0,42, 0, 0,58, 1,0)

Cubic-bezier(, , , ): Ein bestimmter Bezier-Kurventyp, die 4 Werte müssen im Bereich [ 0, 1] Innen

4. Animation-Iteration-Count: Anzahl der Zyklen der Objektanimation abrufen oder festlegen

Wert:

unendlich: Endlosschleife

　Anzahl: Die spezifische Anzahl der Zyklen der angegebenen Objektanimation

5. Animationsrichtung: Abrufen oder Festlegen, ob sich die Objektanimation in der Schleife in umgekehrter Richtung bewegt

Wert:

normal: normale Richtung

Alternativ: Wechseln Sie zwischen normal und umgekehrt

6. Animation-Play-State: Status der Objektanimation abrufen oder festlegen

Laufen: Sport

pausiert: pausiert

7. Animationsfüllmodus: Status außerhalb der Objektanimationszeit abrufen oder festlegen

Wert:

Keine: Standardwert. Stellen Sie keinen anderen Status als die Objektanimation ein

vorwärts: Setzt den Objektzustand auf den Zustand am Ende der Animation

rückwärts: Setzt den Objektstatus auf den Status, wenn die Animation beginnt

Beide: Setzt den Objektstatus auf den End- oder Startstatus der Animation

Das Folgende ist ein Beispiel für eine umfassende Erklärung:

CSS-Code:

<span style="font-family: 'Microsoft YaHei'; font-size: 15px;"><span style="color: #800000;">    #animation
            </span>{<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
                background-color</span>:<span style="color: #0000ff;"> brown</span>;<span style="color: #ff0000;">
                opacity</span>:<span style="color: #0000ff;"> 0.5</span>;<span style="color: #ff0000;">
                position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">                
                left</span>:<span style="color: #0000ff;">40%</span>;<span style="color: #ff0000;">
                overflow</span>:<span style="color: #0000ff;"> hidden</span>;
                
            }<span style="color: #800000;">
            #animation span
            </span>{<span style="color: #ff0000;">
                font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">
                font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> #ccc</span>;<span style="color: #ff0000;">
                opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
                display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 30px</span>;
                
            }<span style="color: #800000;">
            #text1:hover
            </span>{<span style="color: #ff0000;">
                -moz-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;/*鼠标经过时暂停动画*/<span style="color: #ff0000;">
                -webkit-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -o-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -ms-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                animation-play-state</span>:<span style="color: #0000ff;">paused</span>;

            }<span style="color: #800000;">
            #text2:hover
            </span>{<span style="color: #ff0000;">
                -moz-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -webkit-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -o-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -ms-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                animation-play-state</span>:<span style="color: #0000ff;">paused</span>;

            }<span style="color: #800000;">
            #text1
            </span>{<span style="color: #ff0000;">
                
                -webkit-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画名称</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-duration</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画持续时间</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">变化由慢到快</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">过了2S后开始动画</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">设置动画无限播放</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 4s</span>;<span style="color: #ff0000;">
                animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                -ms-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                -ms-animation-duration</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -ms-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -ms-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -ms-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                -ms-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                -moz-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -moz-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -moz-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">    
                -moz-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;
            }<span style="color: #800000;">
            #text2
            </span>{<span style="color: #ff0000;">
                -webkit-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画名称</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-duration</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画持续时间</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">变化由慢到快</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">过了2S后开始动画</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">设置动画无限播放</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 4s</span>;<span style="color: #ff0000;">
                animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                -ms-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                -ms-animation-duration</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -ms-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -ms-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -ms-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                -ms-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                -moz-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -moz-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -moz-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">    
                -moz-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;        
                    
            }<span style="color: #800000;">
            @-webkit-keyframes animation1
            </span>{<span style="color: #ff0000;">
                0%{-webkit-transform</span>:<span style="color: #0000ff;"> translate(-10px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;">
                20%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(25px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.5</span>;}<span style="color: #800000;">
                45%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(45px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 1</span>;}<span style="color: #800000;">
                100%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.8</span>;}<span style="color: #800000;">
                
            }
            @-webkit-keyframes animation2
            </span>{<span style="color: #ff0000;">
                0%{-webkit-transform</span>:<span style="color: #0000ff;"> translate(280px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;">
                30%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(200px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.5</span>;}<span style="color: #800000;">
                65%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(130px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 1</span>;}<span style="color: #800000;">                
                100%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0.8</span>;}<span style="color: #800000;">
            }</span></span>

Nach dem Login kopieren

　　HTML代码：　

<span style="font-family: 'Microsoft YaHei'; font-size: 16px;"><span style="color: #000000;"><div id="animation">
    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text1"</span><span style="color: #0000ff;">></span>这是ly婠婠的博客<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text2"</span><span style="color: #0000ff;">></span>欢迎访问和评论！<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>            
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Nach dem Login kopieren

效果如下：