Thuộc tính animation-timing-function trong CSS dùng để quy định tốc độ chạy nhanh hay chậm của animation ở khúc đầu, giữa và cuối, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính animation-timing-function trong CSS

Chức năng của Thuộc tính animation-timing-function trong CSS

Thuộc tính animation-timing-function trong CSS dùng để quy định tốc độ chạy nhanh hay chậm của animation ở khúc đầu, giữa và cuối.

Các giá trị của Thuộc tính animation-timing-function trong CSS

linear: Không đổi tốc độ, tương đương với cubic-bezier(0, 0, 1, 1).

ease: Chậm đầu cuối, nhanh ở giữa, tương đương với cubic-bezier(0.25, 0.1, 0.25, 1);.

ease-in: Chậm ở đầu, tương đương với cubic-bezier(0.42, 0, 1, 1);.

ease-out: Chậm ở cuối, tương đương với cubic-bezier(0, 0, 0.58, 1);.

ease-in-out: Chậm ở đầu và cuối, tương đương với cubic-bezier(0.42,0,0.58,1);.

Code Thuộc tính animation-timing-function trong CSS

Các giá trị của thuộc tính animation-timing-function trong CSS

<!DOCTYPE html>
<html>
<head>
<title>Các giá trị 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>Các giá trị của thuộc tính animation-timing-function trong CSS</h1>

<p><span style="animation-timing-function: linear;">linear(Không đổi tốc độ)</span></p>

<p><span style="animation-timing-function: ease;">ease(Chậm đầu cuối, nhanh ở giữa)</span></p>

<p><span style="animation-timing-function: ease-in;">ease-in(Chậm ở đầu)</span></p>

<p><span style="animation-timing-function: ease-out;">ease-out(Chậm ở cuối)</span></p>

<p><span style="animation-timing-function: ease-in-out;">ease-in-out(Chậm ở đầu và cuối)</span></p>


</body>
</html>

Chạy Thử

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

<!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>

<p><span style="animation-timing-function: cubic-bezier(0, 0, 1, 1);">(0, 0, 1, 1)-linear(Không đổi tốc độ)</span></p>

<p><span style="animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">(0.25, 0.1, 0.25, 1)-ease(Chậm đầu cuối, nhanh ở giữa)</span></p>

<p><span style="animation-timing-function: cubic-bezier(0.42, 0, 1, 1);">(0.42, 0, 1, 1)-ease-in(Chậm ở đầu)</span></p>

<p><span style="animation-timing-function: cubic-bezier(0, 0, 0.58, 1);">(0, 0, 0.58, 1)-ease-out(Chậm ở cuối)</span></p>

<p><span style="animation-timing-function: cubic-bezier(0.42,0,0.58,1);">(0.42,0,0.58,1)-ease-in-out(Chậm ở đầu và cuối)</span></p>


</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính animation-timing-function trong CSS.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thuộc tính animation-timing-function trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn