Animasi CSS3
Dengan 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 berfungsi apa-apa kesan.
Nyatakan sekurang-kurangnya dua sifat animasi CSS3 terikat pada pemilih:
Nyatakan nama animasi dan nyatakan tempoh animasi
Contoh
Ikat animasi "myfirst" pada elemen div, tempoh: 5 saat:
rreeeNota : Anda mesti menentukan nama animasi dan tempoh animasi. Jika tempoh ditinggalkan, animasi tidak akan dijalankan kerana nilai lalai ialah 0.
Jalankan program dan cuba
Apakah animasi CSS3?
Animasi ialah kesan menukar elemen secara beransur-ansur dari 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%.
Instance
Tukar warna latar belakang apabila animasi berada pada 25% dan 50%, kemudian tukar sekali lagi apabila animasi 100% selesai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<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;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Jalankan program dan cuba
Contoh
Tukar warna latar belakang dan kedudukan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
</body>
</html>Jalankan program dan cuba
Sifat animasi CSS3
Jadual berikut menyenaraikan peraturan @keyframes dan semua sifat animasi:
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
Instance
Jalankan animasi pertama saya, tetapkan semua sifat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@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;}
}
@-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;}
}
</style>
</head>
<body>
<div>css动画</div>
</body>
</html>Animasi yang sama seperti di atas, tetapi menggunakan atribut animasi animasi Singkatan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@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;}
}
@-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;}
}
</style>
</head>
<body>
<div>css动画</div>
</body>
</html>Hasil pelaksanaan program:
