Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um die Wiedergabezeiten für Animationen festzulegen

Verwenden Sie CSS, um die Wiedergabezeiten für Animationen festzulegen

WBOYnach vorne: 2023-09-10 08:53:071025Durchsuche

使用 CSS 设置动画播放次数

Verwenden Sie die Eigenschaft animation-iteration-count, um festzulegen, wie oft die Animation über CSS abgespielt werden soll

Beispiel

Live-Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-direction: alternate-reverse;
            animation-iteration-count: 3;
         }
         @keyframes myanim {
            from {left: 100px;}
            to {left: 200px;}
         }
         #demo1 {animation-timing-function: ease;}
         #demo2 {animation-timing-function: ease-in;}
      </style>
   </head>
   <body>
      <div id = "demo1">ease effect</div>
      <div id = "demo2">ease-in effect</div>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um die Wiedergabezeiten für Animationen festzulegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css count animation

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich eine druckbare Webseite mithilfe von CSS-Medienabfragen?Nächster Artikel：Wie erstelle ich eine druckbare Webseite mithilfe von CSS-Medienabfragen?

In Verbindung stehende Artikel

Mehr sehen