Heim > Artikel > Web-Frontend > Welche CSS-Eigenschaft wird verwendet, um die Geschwindigkeitskurve der Animation festzulegen?

Welche CSS-Eigenschaft wird verwendet, um die Geschwindigkeitskurve der Animation festzulegen?

PHPznach vorne: 2023-09-05 15:29:061391Durchsuche

使用哪个 CSS 属性来设置动画的速度曲线？

Verwenden Sie die Animations-Timing-Funktion, um die Geschwindigkeitskurve der Animation festzulegen. Sie können versuchen, den folgenden Code auszuführen, um Ease- und Ease-In-Animationseffekte einzurichten:

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 vonWelche CSS-Eigenschaft wird verwendet, um die Geschwindigkeitskurve der Animation festzulegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css function animation

Stellungnahme：

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

Vorheriger Artikel：Reduzieren Sie die Farbtiefe mithilfe von CSSNächster Artikel：Reduzieren Sie die Farbtiefe mithilfe von CSS

In Verbindung stehende Artikel

Mehr sehen