Home > Article > Web Front-end > 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?
- PHPzforward
- 2023-09-05 15:29:061388browse
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!
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