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:
<!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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
