Atribut animasi baharu CSS3“@keyframes” boleh dilihat daripada makna literal - keyframes, yang konsisten dengan makna dalam Flash. Prinsip menggunakan CSS3 untuk mencipta kesan animasi adalah sama seperti Flash Kita perlu mentakrifkan kesan keadaan pada bingkai utama dan menggunakan CSS3 untuk memacu kesan animasi.
Sintaks
@keyframes animationname {keyframes-selector {css-styles;}}
animasiname Diperlukan. Mentakrifkan nama animasi.
pemilih bingkai kunci
Diperlukan. Peratusan tempoh animasi.
Nilai undang-undang:
0-100%
dari (sama seperti 0%)
kepada (sama seperti 100%)
gaya css Diperlukan. Satu atau lebih sifat gaya CSS sah.
Definisi dan Penggunaan
Dengan peraturan @keyframes anda boleh mencipta animasi.
Animasi dicipta dengan menukar secara beransur-ansur satu set gaya CSS kepada yang lain.
Anda boleh menukar set gaya CSS ini beberapa kali semasa animasi.
Tentukan masa 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 pada pemilih.
Sokongan penyemak imbas
Pada masa ini, penyemak imbas tidak menyokong peraturan @keyframes.
Firefox menyokong peraturan alternatif @-moz-keyframes.
Opera menyokong peraturan @-o-keyframes alternatif.
Safari dan Chrome menyokong peraturan alternatif @-webkit-keyframes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: #ff72cc;
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>
<div></div>
</body>
</html>Animasi CSS3
Apabila mencipta animasi dalam @keyframes, ikatkannya pada pemilih, jika tidak animasi tidak akan memberi kesan.
Nyatakan sekurang-kurangnya dua sifat animasi CSS3 terikat pada pemilih:
Nyatakan nama animasi
Nyatakan tempoh animasi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
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;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>Sifat Animasi CSS3
Jadual berikut menyenaraikan peraturan @KeyFrames dan semua sifat animasi:
Properties @KeyFrames Menentukan animasi. 3
nama-animasi Menentukan nama animasi @keyframes. 3
tempoh-animasi Menentukan saat atau milisaat yang diperlukan untuk animasi melengkapkan satu kitaran. Lalai ialah 0. 3
fungsi pemasaan-animasi Menentukan lengkung kelajuan animasi. Lalai ialah "kemudahan". 3
animation-delay Menentukan masa animasi bermula. Lalai ialah 0. 3
bilangan lelaran-animasi Menentukan bilangan kali animasi dimainkan. Lalai ialah 1. 3
arah animasi Menentukan sama ada animasi dimainkan secara terbalik dalam kitaran seterusnya. Lalai ialah "biasa". 3
animation-play-state Menentukan sama ada animasi sedang berjalan atau dijeda. Lalai ialah "berjalan". 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
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;
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 mymove /* Firefox */
{
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 mymove /* Safari and Chrome */
{
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 mymove /* Opera */
{
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>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>