animasi CSS3

CSS3, kita dapat membuat animasi yang dapat menggantikan banyak halaman gambar animasi, animasi Flash, dan javascripts.

CSS3
animasi

CSS3 @keyframes aturan

Untuk membuat CSS3 animasi, Anda akan harus belajar @keyframes aturan.

@keyframes aturan adalah untuk membuat animasi. Tentukan gaya CSS dan animasi secara bertahap akan berubah dengan gaya baru dari gaya saat dalam aturan @keyframes.

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.

Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.

属性
@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

contoh

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

animasi CSS3

Ketika membuat @keyframes animasi, mengikat ke pemilih, jika animasi tidak akan berpengaruh.

Tentukan setidaknya dua properti CSS3 animasi terikat untuk pemilih:

Ini menentukan nama animasi
Ketika panjang animasi yang telah ditentukan

contoh

The "myfirst" animasi terikat div elemen Duration: 5 detik:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Coba »

Catatan: Anda harus menentukan durasi animasi dan animasi nama.Jika Anda menghilangkan durasi animasi tidak akan berjalan karena nilai default adalah 0.

Apa CSS3 animasi?

elemen animasi adalah untuk membuat perubahan bertahap dari satu gaya untuk efek gaya lain.

Anda dapat mengubah banyak gaya sebanyak.

Silakan gunakan persentase perubahan dalam waktu yang ditentukan, atau kata kunci "dari" dan "untuk", setara dengan 0% dan 100%.

0% adalah awal dari animasi, animasi adalah 100% selesai.

Untuk mendukung browser terbaik, Anda harus selalu menentukan 0% dan 100% dari pemilih.

contoh

Mengubah warna latar belakang ketika animasi adalah 25% dan 50%, dan 100% selesai ketika animasi berubah lagi:

@keyframes myfirst
{
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;}
}

Coba »

contoh

Mengubah warna latar belakang dan lokasi:

@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;}
}

Coba »

properti CSS3 animasi

Tabel berikut ini berisi aturan @keyframes dan semua properti animasi:

milik	deskripsi	CSS
@keyframes	Ketentuan animasi.	3
animasi	properti singkat untuk semua properti animasi, selain properti animasi-play-state.	3
animasi-nama	Menentukan nama @keyframes animasi.	3
animasi durasi	Ketentuan animasi dibutuhkan untuk menyelesaikan siklus detik atau milidetik. default adalah 0.	3
animasi-waktu-fungsi	Sebuah kecepatan yang telah ditentukan dari kurva animasi. defaultnya adalah "kemudahan".	3
animasi-delay	Ketika animasi yang telah ditentukan dimulai. default adalah 0.	3
animasi-iterasi-count	Telah ditentukan jumlah kali animasi dimainkan. default adalah 1.	3
animasi-arah	Apakah ketentuan-ketentuan animasi untuk bermain secara terbalik untuk siklus berikutnya. defaultnya adalah "normal".	3
animasi-play-state	Apakah ketentuan-ketentuan animasi sedang berjalan atau berhenti. default adalah "berjalan".	3

Dua contoh berikut mengatur semua properti animasi:

contoh

Jalankan animasi myfirst, mengatur semua atribut:

div
{
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;
}

Coba »