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

Thuộc tính animation-timing-function trong CSS
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

animation-timing-function: linear; Không đổi tốc độ
animation-timing-function: ease; Chậm đầu cuối, nhanh ở giữa
animation-timing-function: ease-in;Chậm ở đầu
animation-timing-function: ease-out;Chậm ở cuối
animation-timing-function: ease-in-out; Chậm ở đầu và cuối
<!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>Dùng để quy định tốc độ chạy nhanh hay chậm của animation ở khúc đầu, giữa và cuối:</p>

<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

animation-timing-function: cubic-bezier(0, 0, 1, 1); Không đổi tốc độ
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); Chậm đầu cuối, nhanh ở giữa
animation-timing-function: cubic-bezier(0.42, 0, 1, 1);Chậm ở đầu
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);Chậm ở cuối
animation-timing-function: cubic-bezier(0.42,0,0.58,1);Chậm ở đầu và cuối
<!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>Dùng để quy định tốc độ chạy nhanh hay chậm của animation ở khúc đầu, giữa và cuối:</p>

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

  • ★★★★★ ★★★★★
  • 0 Bình luận
CEO Bùi Tấn Lực | Founder Web Mới
Bùi Tấn Lực
Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ
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 *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn