Pengenalan kepada kerangka utama animasi CSS3

Penjelasan terperinci tentang penggunaan @keyframes dalam CSS3:
Atribut ini berkait rapat dengan atribut animasi Untuk atribut animasi, sila rujuk bab ". Penjelasan terperinci tentang penggunaan atribut animasi dalam CSS3".
1. Pengetahuan asas:
kerangka kunci yang diterjemahkan ke dalam bahasa Cina bermaksud "bingkai utama". tiada masalah dengan flash juga.
Kesan animasi peralihan juga boleh dicapai menggunakan atribut peralihan, tetapi ia agak kasar kerana ia tidak dapat mengawal proses animasi dengan cara yang lebih tepat Contohnya, ia hanya boleh mengawal keseluruhan peralihan atribut tertentu dalam a tempoh masa tertentu, manakala atribut animasi Anda boleh menggunakan @keyframes untuk membahagikan animasi dalam tempoh masa tertentu dengan lebih tepat.
Struktur tatabahasa:

@keyframes animationname {keyframes-selector {css-styles;}}

Analisis parameter:
1.nama animasi: mengisytiharkan nama animasi.
2.keyframes-selector: Digunakan untuk membahagikan tempoh animasi, anda boleh menggunakan bentuk peratusan atau anda boleh menggunakan borang "daripada" dan "kepada".
Borang "dari" dan "kepada" bersamaan dengan 0% dan 100%.
Adalah disyorkan untuk sentiasa menggunakan borang peratusan.
2. Contoh kod:
Contoh 1:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.php.cn/" />   
<title>php中文网</title>  
<style type="text/css">  
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative; 
     
  animation:theanimation 5s infinite alternate; 
  -webkit-animation:theanimation 5s infinite alternate ; 
  -moz-animation:theanimation 5s infinite alternate ; 
  -o-animation:theanimation 5s infinite alternate ; 
  -ms-animation:theanimation 5s infinite alternate ; 
} 
@keyframes theanimation{ 
  from {left:0px;} 
  to {left:200px;} 
} 
@-webkit-keyframes theanimation{ 
  from {left:0px;} 
  to {left:200px;} 
} 
@-moz-keyframes theanimation{ 
  from {left:0px;} 
  to {left:200px;}  
} 
@-o-keyframes theanimation{ 
  from {left:0px;} 
  to {left:200px;}  
} 
@-ms-keyframes theanimation{ 
  from {left:0px;} 
  to {left:200px;} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

Kod di atas melaksanakan animasi ringkas:
1 animasi yang dipanggil animasi.
2. Nama animasi yang diisytiharkan oleh @keyframes mesti digunakan bersama dengan animasi.
3. dari hingga bersamaan dengan 0%-100%, jadi ditetapkan satu perkara perlu dilakukan dalam masa 5 saat.
Contoh 2:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.php.cn/" />   
<title>php中文网</title>  
<style type="text/css">  
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative; 
     
  animation:theanimation 4s infinite alternate; 
  -webkit-animation:theanimation 4s infinite alternate ; 
  -moz-animation:theanimation 4s infinite alternate ; 
  -o-animation:theanimation 4s infinite alternate ; 
  -ms-animation:theanimation 4s infinite alternate ; 
} 
@keyframes theanimation{ 
  0%{top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
@-moz-keyframes theanimation{ 
  0% {top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
@-webkit-keyframes theanimation{ 
  0%{top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
@-o-keyframes theanimation{ 
  0%{top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

Dalam kod di atas, tempoh animasi dibahagikan kepada peratusan, menetapkan bahawa perkara yang ditentukan harus dilakukan dalam selang waktu yang ditentukan.

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; animation:theanimation 4s infinite alternate; -webkit-animation:theanimation 4s infinite alternate ; -moz-animation:theanimation 4s infinite alternate ; -o-animation:theanimation 4s infinite alternate ; -ms-animation:theanimation 4s infinite alternate ; } @keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-moz-keyframes theanimation{ 0% {top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-webkit-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-o-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } </style> </head> <body> <div></div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik