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

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

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

Tự code rồi chạy thử... Chạy Thử 
<!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>
Các giá trị 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