CSS @keyframes

@keyframes ₃

---

Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.

Thuộc tính	giá trị	Ví dụ	Mô tả
@keyframes	Tên amination	@keyframes amiName{}	Xác định tên cho @keyframes.
	from {thuộc tính: giá trị;} to {thuộc tính: giá trị;}	from {top: 0;} to {bottom: 100px; color: red;}	Định dạng thành phần theo trí đầu và vị trí cuối.
	Phần trăm {thuộc tính: giá trị;}	0% {top: 0;} 50% {top: 150px;} 100% {top: 50px;}	Định dạng thành phần theo phần trăm thời gian hành động diễn ra.

Xem ví dụ:

<div id="thao1"> thao 1 </div>
<div id="thao2"> thao 2 </div>
<div id="thao3"> thao 3 </div>
<div id="thao1w"> thao 1w </div>
<div id="thao2w"> thao 2w </div>
<div id="thao3w"> thao 3w </div>
<div id="thao4w"> thao 4w </div>
<style>

#thao1 {
position: relative;
width: 150px;
animation: amiName01 7s infinite;
-moz-animation: amiName01 7s infinite;
-webkit-animation: amiName01 7s infinite;
-o-animation: amiName01 7s infinite;
}

@keyframes amiName01 {
0% { left: 0px; }
50% { left: 80%; color: #A817E6; background: #FCD20A; }
100% { left: 0px; }
}

@-moz-keyframes amiName01 {
0% { left: 0px; }
50% { left: 80%; color: #A817E6; background: #FCD20A; }
100% { left: 0px; }
}

@-webkit-keyframes amiName01 {
0% { left: 0px; }
50% { left: 80%; color: #A817E6; background: #FCD20A; }
100% { left: 0px; }
}

@-o-keyframes amiName01 {
0% { left: 0px; }
50% { left: 80%; color: #A817E6; background: #FCD20A; }
100% { left: 0px; }
}
/********************************/
#thao2 {
position: relative;
width: 150px;
animation: amiName02 12s infinite;
-moz-animation: amiName02 12s infinite;
-webkit-animation: amiName02 12s infinite;
-o-animation: amiName02 12s infinite;
}

@keyframes amiName02 {
from { left: 0px; }
to { left: 80%; color: #598AD8; background: #A2BD7B; }
}

@-moz-keyframes amiName02 {
from { left: 0px; }
to { left: 80%; color: #598AD8; background: #A2BD7B; }
}

@-webkit-keyframes amiName02 {
from { left: 0px; }
to { left: 80%; color: #598AD8; background: #A2BD7B; }
}

@-o-keyframes amiName02 {
from { left: 0px; }
to { left: 80%; color: #598AD8; background: #A2BD7B; }
}
/**************************************/
#thao3 {
position: relative;
width: 150px;
animation: amiName03 15s infinite;
-moz-animation: amiName03 15s infinite;
-webkit-animation: amiName03 15s infinite;
-o-animation: amiName03 15s infinite;
}

@keyframes amiName03 {
0% { left: 0px; }
30% { left: 80%; color: #5382D3; background: #cccccc; }
30% { left: 80%; color: #000000; background: #0000cc; }
100% { left: 0px; }
}

@-moz-keyframes amiName03 {
0% { left: 0px; }
50% { left: 80%; color: #5382D3; background: #cccccc; }
30% { left: 80%; color: #ffffff; background: #A2BBE2; }
100% { left: 0px; }
}

@-webkit-keyframes amiName03 {
0% { left: 0px; }
50% { left: 80%; color: #5382D3 background: #cccccc; }
30% { left: 80%; color: #ffffff; background: #A2BBE2; }
100% { left: 0px; }
}

@-o-keyframes amiName03 {
0% { left: 0px; }
50% { left: 80%; color: #5382D3; background: #cccccc; }
30% { left: 80%; color: #ffffff; background: #A2BBE2; }
100% { left: 0px; }
}
/****************************/
#thao1w
{
width:100px;
height:50px;
background:#ADCB82;
position:relative;
animation:mymove1w 5s infinite;
-moz-animation:mymove1w 5s infinite; /* Firefox */
-webkit-animation:mymove1w 5s infinite; /* Safari and Chrome */
-o-animation:mymove1w 5s infinite; /* Opera */
}

@keyframes mymove1w{from {top:0px;}to {top:200px;}}
@-moz-keyframes mymove1w {from {top:0px;}to {top:200px;}}
@-webkit-keyframes mymove1w {from {top:0px;}to {top:200px;}}
@-o-keyframes mymove1w {from {top:0px;}to {top:200px;}
}
/****************************/
#thao2w
{
width:100px;
height:30px;
background:#DEEBFA;
position:relative;
animation:mymove2w 7s infinite;
-moz-animation:mymove2w 7s infinite; /* Firefox */
-webkit-animation:mymove2w 7s infinite; /* Safari and Chrome */
-o-animation:mymove2w 7s infinite; /* Opera */
}

@keyframes mymove2w{0% {top:0px;}25% {top:200px;}75% {top:50px}100% {top:100px;}}
@-moz-keyframes mymove2w {0% {top:0px;}25% {top:200px;}75% {top:50px}100% {top:100px;}}
@-webkit-keyframes mymove2w {0% {top:0px;}25% {top:200px;}75% {top:50px}100% {top:100px;}}
@-o-keyframes mymove2w {0% {top:0px;}25% {top:200px;}75% {top:50px}100% {top:100px;}}
/***************************/
#thao3w

{
width:100px;
height:50px;
background:#F5FAFF;
position:relative;
animation:mymove3w 11s infinite;
-moz-animation:mymove3w 11s infinite; /* Firefox */
-webkit-animation:mymove3w 11s infinite; /* Safari and Chrome */
-o-animation:mymove3w 11s infinite; /* Opera */
}

@keyframes mymove3w
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:#6092DC; width:300px;}
}

@-moz-keyframes mymove3w /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:#6092DC; width:300px;}
}

@-webkit-keyframes mymove3w /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:#6092DC; width:300px;}
}

@-o-keyframes mymove3w /* Opera */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:#6092DC; width:300px;}
}

/*************************************/
#thao4w
{
width:100px;
height:100px;
background:#3399CC;
position:relative;
animation:mymove4w 5s infinite;
-moz-animation:mymove4w 5s infinite; /* Firefox */
-webkit-animation:mymove4w 5s infinite; /* Safari and Chrome */
-o-animation:mymove4w 5s infinite; /* Opera */
}

@keyframes mymove4w
{
0% {top:0px; left:0px; background:#3399CC;}
25% {top:0px; left:100px; background:#B333CC;}
50% {top:100px; left:100px; background:#CC6633;}
75% {top:100px; left:0px; background:#4DCC33;}
100% {top:0px; left:0px; background:#3399CC;}
}

@-moz-keyframes mymove4w /* Firefox */
{
0% {top:0px; left:0px; background:#3399CC;}
25% {top:0px; left:100px; background:#B333CC;}
50% {top:100px; left:100px; background:#CC6633;}
75% {top:100px; left:0px; background:#4DCC33;}
100% {top:0px; left:0px; background:#3399CC;}
}

@-webkit-keyframes mymove4w /* Safari and Chrome */
{
0% {top:0px; left:0px; background:#3399CC;}
25% {top:0px; left:100px; background:#B333CC;}
50% {top:100px; left:100px; background:#CC6633;}
75% {top:100px; left:0px; background:#4DCC33;}
100% {top:0px; left:0px; background:#3399CC;}
}

@-o-keyframes mymove4w /* Opera */
{
0% {top:0px; left:0px; background:#3399CC;}
25% {top:0px; left:100px; background:#B333CC;}
50% {top:100px; left:100px; background:#CC6633;}
75% {top:100px; left:0px; background:#4DCC33;}
100% {top:0px; left:0px; background:#3399CC;}
}
</style>

thao 1

thao 2

thao 3

thao 1w

thao 2w

thao 3w

thao 4w

---