Sử dụng chức năng định thời gian hoạt ảnh để thiết lập đường cong tốc độ của Hoạt ảnh. Bạn có thể thử chạy đoạn mã sau để thiết lập hiệu ứng hoạt ảnh dễ dàng và dễ sử dụng:
Ví dụ
<!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>