Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini


TRANSITION CSS3: CONTOH 1
August 25, 2010
Posted by: Fauzie


Untuk membuat satu animasi yang mudah anda tidak perlu lagi menggunakan Javascript. Cara yang paling mudah ialah dengan menggunakan apa yang dipanggil CSS3-transition dan juga setInterval.

Kelebihan menggunakan CSS3-transition dan setInterval ialah:

1. Mudah dan effective—kita hanya memerlukan beberapa baris kod sahaja.
2. Browser dapat memberi effect animasi. Tidak seperti Javascript yang memerlukan kod-kod yang kompeks sebelum animasi terjadi
3. Ia nampak lebih “bersih” kerana kita tidak perlu membuat modifikasi “style attribute” dan sudah tentu ia lebih efficient.
4. Ianya “standard” dalam penyediaan kod.

Transition duration atau jangkawaktu transition.

Pada asasnya anda hanya perlu set “time properties” dalam css selector seperti –moz-transition-duration: 1s, untuk browser Mozilla. “Time properties” ini menentukan lamanya sesuatu animasi itu dan browser yang akan menentukan “transition”nya.

Untuk bowser-browser Firefox, Chrome, Safari dan Opera anda hanya perlukan kod-kod ini:

-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;


Nota: 1s ialah 1 saat

Contoh kod transition

.Kotak {
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;

margin: 10px;
background-color : red;
}
.Kotak:hover {
margin: 50px;
background-color : green;
}


Pengertian Kod Di atas

Jika anda letak cursor ke atas .Kotak selama 1 saat, margin akan bergerak dari 10px kepada 50px dan warna latar belakang (background-color) akan bertukar dari warna merah kepada warna hijau.

Transition-Property

Kita juga boleh memberi nama CSS property kepada transition yang kita guna, seperti color (warna), width (lebar), margin dan lain-lain seperti di bawah ini:


-moz-transition-property: margin, background-color;
-webkit-transition-property:margin, background-color;
-o-transition-property:margin, background-color;


Di bawah ini ialah "Live Demo" CSS transition untuk box effect atau effek kotak

Sila hover curso ke atas kotak.
Hello


Dan di bawah ini adalah kod-kod CSS dan markup(html)

<html>
<head>
<style type="text/css">

.Kotak {
padding: 10px;
display: inline-block;
overflow: auto;
}
.Kotak .animasibox1 {
width: 200px;
height: 200px;
margin: 10px;

-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

background-color: #f00;
border: 2px solid #900;

line-height: 200px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: white;
}
.Kotak:hover .animasibox1 {
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;

background-color: #fa0;
border: 5px solid #930;

font-size: 60px;
text-shadow: 0px 0px 4px black;
}
</style>
</head>
<body>
<div class="Kotak">
<div class="animasibox1">Hello</div>
</div>
</body>
</html>


Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: