Desember 31, 2010   Animasi , CSS3

CSS3 ANIMASI DENGAN WEBKIT "TRANSITION" DAN "ANIMATION"

Untuk Dapat Melihat Animasi CSS3 dengan Sempurna, Gunaknlah Browser Berbasis Webkit, Seperti Chrome. Dengan CSS3 Transition dan Animation, K...

Untuk Dapat Melihat Animasi CSS3 dengan Sempurna, Gunaknlah Browser Berbasis Webkit, Seperti Chrome. Dengan CSS3 Transition dan Animation, Kita Dapat Membuat Efek Animasi Pada Obyek yang Kita Berikan. Baik Animasi Saat di Hover Ataupun Animasi Lainnya.

Setelah Membaca Sedikit Kalimat Pembuka di Atas, Lihatlah Perbedaan Antara Kedua Kotak di Bawah Ini. (Kotak 1 dg Kotak 2)

KOTAK 1

KOTAK 2

Pada Kotak 1

Perubahan Tampilan Kotaknya Saat di Hover Terlihat "Keren", Seperti Animasi. Karena CSS3nya Menggunakan -webkit-transition dan -webkit-animation

Sedangkan Pada Kotak 2

Perubahan Tampilan Kotaknya Saat di Hover Terlihat "Tidak Keren", dan Tidak Ada yang Istimewa, Seperti Hover Biasa. Karena CSS3nya Menggunakan -webkit-transition dan -webkit-animation

di Atas Adalah Sedikit Pengertian -webkit-transition dan -webkit-animation. Selanjutnya, Setelah Mengerti yang di Maksud di Atas, Lihat Beberapa Contoh Efek Transition dan Animation Serta CSS3nya di Bawah Ini. Ohya, Untuk Membuatnya, Kode CSS3nya dan Kode HTMLnya, dapat di Letakan di Dalam Postingan di Blogmu Ataupun di HTML/Java Script di Blogmu!

BAGIAN PERATAMA: CONTOH EFEK CSS3 TRANSITION

Perubahan Background

► CSS3nya dan HTMLnya Adalah:

<style>
.animasi1 {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 1s ease-in-out;
}
.animasi1:hover {
background: #FFFF00;
}
</style>
<div class="animasi1">
Perubahan Background</div>

Perubahan Tempat

► CSS3nya dan HTMLnya Adalah:

<style>
.animasi2 {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 1s ease-in-out;
}
.animasi2:hover {
-moz-transform:translate(20em, 0pt);
-webkit-transform:translate(20em, 0pt);
}
</style>
<div class="animasi2">
Perubahan Tempat</div>

Perubahan
Ukuran

► CSS3nya dan HTMLnya Adalah:

<style>
.animasi3 {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 1s ease-in-out;
}
.animasi3:hover {
width: 500px;
}
</style>
<div class="animasi3">
Perubahan Ukuran</div>

Penambahan Border Radius

► CSS3nya dan HTMLnya Adalah:

<style>
.animasi4 {
background: #00BFFF;
width: 250px;
height: 70px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 1s ease-in-out;
}
.animasi4:hover {
border-radius:50px 0px;
-moz-border-radius:50px 0px;
}
</style>
<div class="animasi4"><br/>
Perubahan Border Radius</div>

3D

► CSS3nya dan HTMLnya Adalah:

<style>
.animasi5 {
background: #00BFFF;
font-size:40px;
width: 100px;
height: 65px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 0.2s ease-in-out;
}
.animasi5:hover {
text-shadow: 1px 1px #FFF, 2px 2px #FFF, 3px 3px #FFF, 4px 4px #FFF, 5px 5px #FFF;
}
</style>
<div class="animasi5">
3D</div>

Berputar

► CSS3nya dan HTMLnya Adalah:

<style>
.animasi6 {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 1s ease-in-out;
}
.animasi6:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
</style>
<div class="animasi6">
Berputar</div>

Ini Adalah

Papan Tulisaku

► CSS3nya dan HTMLnya Adalah:

<style>
.papantulis {background: #transparent;width: 200px;height: 50px;cursor: pointer;position: relative;-webkit-transition: all 1s;
}
.papantulis:after {content: '';position: absolute;width: 70%;height: 10px;bottom: 0;
left: 15%;z-index: -1;-webkit-box-shadow: 0 9px 5px #d3d3d3;-moz-border-radius:15px;border-radius:15px;
}
.papantulis > div {
position: absolute;width: 100%; height: 100%;top: 0; left: 0;background: #00BFFF;-webkit-transition: all 0.5s ease-in-out;font: 20px/50px bold helvetica, arial, sans-serif;
text-align: center;-moz-border-radius:15px;border-radius:15px;color:#000;
}
.papantulis > div:first-child {
position: relative;z-index: 2;border-radius:15px;
}
.papantulis:hover {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);
}
.papantulis:hover > div:first-child {opacity: 0;
}
.papantulis:hover div:last-child {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);
}
</style>
<div class="papantulis">
<div>
Ini Adalah</div>
<div>
Papan Tulisaku</div>
</div>

di Atas Adalah Sedikit Contoh Penggunaan CSS3 Transition. Ubahlah Style CSS3nya Sesuai dg Kreasi Kamu. dari Semua Contoh di Atas, Dapat di Simpulkan: Dengan CSS3 Transition, Kita Dapat Membuat Efek Hover Pada Suatu Obyek Lebih Keren "Seperti Animasi". Ohya, Jangan Lupa, Untuk Dapat Melihat dan Menikmati Efek CSS3 Transition dg Sempurna, Gunakanlah Browser Berbasis Webkit, Seperti Chrome. Selanjutnya, Lihat Beberapa Contoh Efek yang Menggunakan Webkit Animation di Bagian 2 di Bawah Ini:

BAGIAN KEDUA: CONTOH EFEK CSS3 TRANSITION DENGAN CSS3 ANIMATION

Ke Kiri dan Ke Kanan

► CSS3nya dan HTMLnya Adalah:

<style>
.linglung {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 2s ease-in-out;
}
.linglung:hover {
-webkit-animation-name: linglung;
-webkit-animation-duration: 2s;
}
@-webkit-keyframes linglung {
1% {margin-left: -0px;}
10% {margin-left: 10px;}
20% {margin-left: -10px;}
30% {margin-left: 10px;}
40% {margin-left: -10px;}
50% {margin-left: 10px;}
60% {margin-left: -10px;}
70% {margin-left: 10px;}
80% {margin-left: -10px;}
90% {margin-left: 10px;}
100% {margin-left: 0px;}
}
</style>
<div class="linglung">Ke Kiri dan Ke Kanan</div>

Multi Background

► CSS3nya dan HTMLnya Adalah:

<style>
.multiwarna {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 0.2s ease-in-out;
  -webkit-animation-iteration-count: 3;
   -webkit-animation-direction: alternate;

}
.multiwarna:hover {
-webkit-animation-name: multiwarna;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes multiwarna {
0% { background-color:#DEDEDE;}
5% { background-color:#109F9D;}
10% { background-color:#B19FD9;}
15% { background-color:green;}
20% { background-color:#E9E32E;}
40% { background-color:#red; }
45% { background-color:#711943; }
50% { background-color:#3FFFF5; }
55% { background-color:#1F67C5; }
60% { background-color:orange; }
80% { background-color:#778899; }
90% { background-color:#ADFF2F; }
100% { background-color:#FF00FF; }
}
</style>
<div class="multiwarna">
Multi Background</div>

Berjalan dan Kembali

► CSS3nya dan HTMLnya Adalah:

<style>
.berjalan {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 0.6s ease-in-out;
}
.berjalan:hover {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes bounce {
from {
margin-left: 0px;
}
to {
margin-left: 250px;
}
}
</style>
<div class="berjalan">
Berjalan dan Kembali</div>

Redup dan Kembali

► CSS3nya dan HTMLnya Adalah:

<style>
.redup {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 0.6s ease-in-out;
}
.redup:hover {
-webkit-animation-name: redup;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes redup {
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}
</style>
<div class="redup">

Redup dan Kembali</div>

Kaget

► CSS3nya dan HTMLnya Adalah:

<style>
.kaget {
background: #00BFFF;
width: 100px;
height: 100px;
text-align: center;
font-family: comic sans MS;
-webkit-transition: all 0.6s ease-in-out;
}
.kaget:hover {
-webkit-animation-name: scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale {
from{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;
}
}
</style>
<div class="kaget">
Kaget</div>

Kreasikan Style CSS3nya dengan Kreatifitasmu. Ok, Demikian Dulu. Semoga Bermanfaat.
Jangan Lupa Komentarnya Ya, Atau Like dan Share Juga Ke Teman-Teman
Hehehehehehehehe....