search

Home >Web Front-end >CSS Tutorial >Which CSS property is used to set the speed curve of the animation?

Which CSS property is used to set the speed curve of the animation?

PHPz
PHPzforward
2023-09-05 15:29:061468browse

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

Use animation-timing-function to set the speed curve of the animation. You can try running the following code to set up ease and ease-in animation effects:

Sample

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>

The above is the detailed content of Which CSS property is used to set the speed curve of the animation?. For more information, please follow other related articles on the PHP Chinese website!

css function animation
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Flatten color depth using CSSNext article：Flatten color depth using CSS

Related articles

See more