Bahasa Inggeris [freɪmz] AS [freɪmz]

n. bingkai cermin mata;

css3 @keyframes atribut sintaks

Fungsi: Dengan peraturan @keyframes, anda boleh mencipta animasi.

Arahan: Prinsip mencipta animasi ialah menukar satu set gaya CSS secara beransur-ansur kepada set gaya yang lain. Anda boleh menukar set gaya CSS ini beberapa kali semasa animasi. Menentukan apabila perubahan berlaku sebagai peratusan, atau melalui kata kunci "dari" dan "kepada", yang bersamaan dengan 0% dan 100%. 0% ialah masa mula animasi, 100% ialah masa tamat animasi. Untuk sokongan penyemak imbas terbaik, anda harus sentiasa menentukan pemilih 0% dan 100%.

Nota: Sila gunakan sifat animasi untuk mengawal penampilan animasi dan mengikat animasi kepada pemilih.

Atribut @keyframes dalam css3 bermakna animasi boleh dibuat melalui prinsip @keyframes, iaitu satu set gaya CSS akan bertukar secara beransur-ansur kepada set gaya yang lain

css3 @keyframes atribut contoh

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

Run Instance »

Klik butang "Run Instance" untuk melihat instance dalam talian