Sử dụng thuộc tính chức năng định thời gian hoạt ảnh, với tính năng dễ lấy ra giá trị để đặt hoạt ảnh có bắt đầu chậm và kết thúc bằng CSS:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background-color: #808000;
animation-name: myanim;
animation-duration: 2s;
animation-direction: alternate-reverse;
animation-iteration-count: 3;
}
@keyframes myanim {
from {left: 100px;}
to {left: 200px;}
}
#demo {animation-timing-function: ease-out;}
</style>
</head>
<body>
<div id = "demo">ease-in-out effect</div>
</body>
</html>