Animasi CSS3
Animasi CSS3
CSS3, kami boleh mencipta animasi, yang boleh menggantikan banyak imej animasi halaman web, animasi Flash dan JAVAScripts.
Peraturan CSS3 @keyframes
Untuk mencipta animasi CSS3, anda perlu memahami peraturan @keyframes.
Peraturan @keyframes adalah untuk mencipta animasi. Tentukan gaya CSS dan animasi dalam peraturan @keyframes yang akan berubah secara beransur-ansur daripada gaya semasa kepada gaya baharu.
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">
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}Sifat animasi CSS3
Jadual berikut menyenaraikan peraturan @keyframes dan semua sifat animasi: Animasi CSS. 3
fungsi pemasaan-animasi menentukan lengkung kelajuan animasi. Lalai ialah "kemudahan". 3
tunda-animasi menentukan bila animasi bermula. Lalai ialah 0. 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">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>rrreeApakah animasi CSS3? Animasi ialah kesan menukar elemen secara beransur-ansur daripada satu gaya ke gaya yang lain. Anda boleh menukar seberapa banyak gaya yang anda mahu seberapa banyak kali yang anda suka.
Sila nyatakan masa apabila perubahan berlaku sebagai peratusan, atau gunakan kata kunci "dari" dan "kepada", yang bersamaan dengan 0% dan 100%.
0% ialah permulaan animasi, 100% ialah penyiapan animasi.
Untuk sokongan penyemak imbas terbaik, anda hendaklah sentiasa menentukan pemilih 0% dan 100%.
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>