Membuat Animasi Menggunakan CSS3
Demo:
(Untuk melihat kembali, Reload Halaman...)
CSS3
Animation
Animation
CSS3 @keyframes Rule
Untuk membuat animasi dalam CSS3, Anda harus belajar juga tentang @keyframes Rule.
@keyframes Rule adalah di mana suatu animasi akan dibuat. Tentukan gaya CSS dalam @keyframes Rule dan animasi secara bertahap akan berubah dari gaya saat ini ke gaya yang baru.
Internet Explorer dan Opera belum mendukung @keyframes Rule atau properti animasi.
Firefox membutuhkan awalan-moz-, sementara Chrome dan Safari membutuhkan awalan-WebKit-.
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
CSS3 Animations
Ketika animasi dibuat dalam @keyframe, Anda harus menentukan nama dan durasi animasi. Jika durasi dihilangkan, animasi tidak akan berjalan, karena nilai default adalah "0".
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
Animations in CSS3
Animasi adalah efek yang memungkinkan element merubah tampilannya secara bertahap, dari satu gaya ke gaya yang lainnya. Anda dapat menentukan sendiri berapa banyak gaya yang Anda inginkan.
Menentukan kapan perubahan akan terjadi, seperti dalam persen atau kata kunci "dari" dan "Ke", yang nilainya sama dengan 0% sampai 100%.
Nilai 0% adalah awal dari animasi, dan 100% adalah nilai akhir ketika animasi selesai.
Agar browser anda mendukung dengan baik, Anda harus selalu menentukan nilai tersebut, baik 0% dan 100%.
Berikut ini adalah contoh Mengubah warna latar belakang ketika animasi 25%, 50%, dan ketika animasi selesai 100% :
@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;}
}
{
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;}
}
Contoh Mengubah warna latar belakang dan posisi:
@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;}
}
{
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;}
}
CSS3 Animasi Properti
- @keyframes: Menentukan animasi
- animation: Sebuah properti singkat untuk semua properti animasi, kecuali animasi-play-state property
- animation-name: Menentukan nama animasi @keyframes
- animation-duration: Menentukan berapa detik atau milidetik animasi yang diperlukan untuk menyelesaikan satu siklus. Default adalah "0"
- animation-timing-function: Menjelaskan bagaimana animasi akan berlangsung dari suatu siklus durasi.
- animation-delay: Menentukan ketika animasi akan dimulai. Default adalah "0"
- animation-iteration-count: Menentukan jumlah berapa kali sebuah animasi akan dimainkan. Default adalah "1"
- animation-direction: Menentukan apakah animasi harus bermain secara terbalik pada siklus alternatif atau tidak. Default adalah "normal"
- animation-play-state: Menentukan apakah animasi sedang berjalan atau berhenti. Default adalah "berjalan"
Dibawah ini adalah dua buah contoh sets untuk animation properties:
Contoh menjalankan dan memanggil animasi pada Id "myfirst", dengan menetapkan animation properties sebagai berikut:
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;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-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;
}
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-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;
}
Contoh Animasi yang sama seperti di atas, dengan menggunakan animation property singkat:
div
{
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;
}
{
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;
}
sumber: w3schools
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon