Bahasa Inggeris [freɪmz] AS [freɪmz]
n. bingkai cermin mata;
css @keyframes harta sintaks
Apakah itu @keyframes?
@keyframes ialah peraturan CSS yang boleh digunakan untuk mentakrifkan gelagat tempoh animasi CSS dan mencipta animasi mudah.
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.
css @keyframes harta 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