Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Giá trị cubic-bezier của thuộc tính animation-timing-function trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
span {
 padding:5px;
 background: red;
 color: white;
 font-weight: bold;
 position: relative;
 animation-name: quaPhai; /* Áp dụng animation có tên "quaPhai" */
 animation-duration: 8s; /* Thời gian diễn ra animation là 8s*/
 animation-iteration-count: infinite; /*số lần một animation sẽ lặp lại là vô hạn*/ 
}
@keyframes quaPhai{
 from {left: 0px;}
 to {left: 100%;}
}
</style>
</head>
<body>

<h1>Giá trị cubic-bezier của thuộc tính animation-timing-function trong CSS</h1>

Dùng để quy định tốc độ chạy nhanh hay chậm của animation ở khúc đầu, giữa và cuối:

(0, 0, 1, 1)-linear(Không đổi tốc độ)

(0.25, 0.1, 0.25, 1)-ease(Chậm đầu cuối, nhanh ở giữa)

(0.42, 0, 1, 1)-ease-in(Chậm ở đầu)

(0, 0, 0.58, 1)-ease-out(Chậm ở cuối)

(0.42,0,0.58,1)-ease-in-out(Chậm ở đầu và cuối)

</body>
</html>

Giá trị cubic-bezier của thuộc tính animation-timing-function trong CSS nằm trong bài viết Thuộc tính animation-timing-function trong CSS