Welche zwei Möglichkeiten gibt es, Animationen in CSS3 zu implementieren?

Es gibt zwei Möglichkeiten, Animationen in CSS3 zu implementieren: 1. Verwenden Sie das Übergangsattribut und das Transformationsattribut, um den Übergang bzw. die Form festzulegen. 2. Verwenden Sie das Animationsattribut „Animation“, um den Animationseffekt festzulegen.

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

1. Verwenden Sie den Übergang, um den Übergang festzulegen, fügen Sie Transformation hinzu, um die Form festzulegen, und erstellen Sie einen Animationseffekt wie folgt:

.divadd {
     transition: All 0.4s ease-in-out;
         -webkit-transition: All 0.4s ease-in-out;
         -moz-transition: All 0.4s ease-in-out;
         -o-transition: All 0.4s ease-in-out;
 
     transform:rotate(360deg);
    -ms-transform:rotate(360deg); /* IE 9 */
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
}

Diese Methode ist jedoch relativ nischenorientiert und schwer zu kontrollieren.

2. Fügen Sie das Animationsattribut hinzu und legen Sie den Animationseffekt wie folgt fest:

.a1 {
    position: absolute;
    animation: a1 3s;
    opacity: 0
}
@keyframes a1 {
    0% {left: 10px;opacity: 0}
    30% {left: 60px;background-color: pink;font-size:23px;opacity: 1}
    90% {left: 100px;background-color: red;opacity: 1}
    100% {left: 10px;opacity: 0}
}　

In den eckigen Klammern können nach dem obigen Prozentsatz verschiedene Attributwerte hinzugefügt werden, z. B. „Transform Ratote“ und „Left“. . . . . . Vergessen Sie nicht, die Position absolut festzulegen, wenn Sie eine Positionierung hinzufügen, z. B. links oben.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Alle Attribute sind:

animation-name: myfirst;  //动画名称，用于animation引用
animation-duration: 5s;  //动画时长，
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

• animation-fill-mode legt den Status fest, nachdem die Animation endet.

• none: Standardwert. Stellen Sie keinen anderen Status als die Objektanimation ein, den DOM-Status vor der Animation

• vorwärts: Setzen Sie den Objektstatus auf den Status am Ende der Animation, 100 % oder auf den Status, wenn die Animationsrichtung auf „Umkehren“ eingestellt ist , es wird angezeigt, nachdem die Animation beendet ist. Das erste Keyframe-Frame

• rückwärts: Setzt den Objektstatus auf den Status, wenn die Animation beginnt (der Test zeigt, dass sich das DOM nicht im Status vor der Animation befindet)

• beides: Setzen Sie den Objektstatus auf den Status, wenn die Animation endet oder beginnt, und auf den Endstatus „Priorität“

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWelche zwei Möglichkeiten gibt es, Animationen in CSS3 zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!