#CSS3

Tutorial CSS3 Part 7 – Membuat Efek Animasi CSS3

By Diki Alfarabi Hadi
20 February 2016
CSS3

Tutorial CSS3 Part 7 – Membuat Efek Animasi CSS3

Tutorial CSS3 Part 7 – Membuat Efek Animasi CSS3 – CSS3 memiliki banyak sekali fitur yang baru. salah satunya adalah animasi. animasi adalah salah satu fitur baru dari css3. dengan css3 animation ini memungkinkan kita untuk membuat berbagai animasi dasar. dan jika di dalami lagi kita bisa membuat berbagai bentuk animasi dengan css. pada tutorial css3 part 7 ini saya ingin menjelaskan dan mengajak teman-teman yang baru belajar css3. untuk mengenal animasi menggunakan css3 ini. di asumsikan untuk teman-teman yang akan mempelajari tutorial ini alangkah lebih baiknya jika memahami css dasar terlebih dulu. teman-teman bisa membaca tutorial saya sebelumnya tentang css dasar. Tutorial CSS3 Part 7 – Membuat Efek Animasi CSS3

Membuat Efek Animasi CSS3

CSS3 menyediakan fitur baru. yaitu animasi. dengan animasi css3 ini kita bisa membuat berbagai animasi. tanpa harus menggunakan javascript dan lainnya. sebelum membuat animasi dengan css. kita harus berkenalan dulu dengan yang namanya @keyframes. @keyframes adalah fungsi baru dari css3 untuk membuat animasi. ada banyak sekali kelebihan menggunakan css untuk membuat animasi. karena animasi yang di buat tidak berat dan tidak akan memakan bandwitch yang besar.

Mengenal @keyframes CSS3

@keyframes adalah fungsi baru dari css3 untuk mendefinisikan animasi pada sebuah element. lalu bagaimana cara menggunakan @keyframes untuk membuat animasi css3 ? yang harus di lakukan untuk menggunakan @keyframes adalah dengan mendefinisikan dulu nama animasi yang kita buat. lalu buat animasi dengan nama animasi yang di buat. bingung ? langsung aja kita masuk ke contoh membuat animasi sederhana dengan @keyframes css3. Tutorial CSS3 Part 7 – Membuat Efek Animasi CSS3

untuk penggunaan @keyframes ada yang namanya kondisi awal dan kondisi akhir. berikut perhatikan contohnya, sekalian memahami cara penggunaan @keyframes css3 untuk membuat animasi.

contoh.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat efek animasi dengan css3 | www.malasngoding.com</title>

</head>

<body>

<h1>Membuat efek animasi dengan css3 | www.malasngoding.com</h1>

<h2>Contoh penggunaan @keyframe</h2>

</body>

</html>

contoh.css

body{

background: #35A9DB;

font-family: roboto;

color: #fff;

}

h1{

width: 550px;

}

.kotak{

background: blue;

width: 200px;

height: 200px;

animation-name: animasi_kotak;

animation-duration: 2s;

}

@keyframes animasi_kotak{

from{ background: blue;}

to{background: red;}

}

dan hasilnya

See the Pen contoh @keyframes by Malas Ngoding (@malasngoding) on CodePen.0

perhatikan pada contoh di atas. terdapat sebuah element kotak. dan kita beri nama animasi untuk kotak tersebut dengan nama ‘animasi_kotak’. dan memberikan durasi animasinya selama 2 detik.

1 2	animation-name: animasi_kotak; animation-duration: 2s;

dan langsung kita definisikan animasi yang mau kita buat dengan @keyframes. dengan animasi yang mengubah warna pada kotak dari warna biru. menjadi warna merah. Tutorial CSS3 Part 7 – Membuat Efek Animasi CSS3

@keyframes animasi_kotak{

from{ background: blue;}

to{background: red;}

}

Selain menggunakan kondisi awal dan kondisi akhir kita juga bisa menggunakan persentase untuk membuat animasi dengan @keyframes css3.

contoh2.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat efek animasi dengan css3 | www.malasngoding.com</title>

</head>

<body>

<h1>Membuat efek animasi dengan css3 | www.malasngoding.com</h1>

<h2>Contoh penggunaan @keyframe</h2>

</body>

</html>

contoh2.css

body{

background: #35A9DB;

font-family: roboto;

color: #fff;

}

h1{

width: 550px;

}

.kotak{

background: blue;

width: 200px;

height: 200px;

position: relative;

animation-name: animasi_kotak;

animation-duration: 2s;

}

@keyframes animasi_kotak{

0% {background-color: red; left:0px; top:0px;}

25% {background-color: yellow; left:200px; top:0px;}

50% {background-color: blue; left:0px; top:200px;}

75% {background-color: green; left:200px; top:200px;}

100% {background-color: red; left:0px; top:0px;}

}

See the Pen VeOOoa by Malas Ngoding (@malasngoding) on CodePen.0

Dukungan Browser Animasi @keyframes CSS3

agar browser dapat mendukung animasi css3. khususnya @keyframe. kita bisa menambahkan syntax berikut.

@-moz-keyframes = untuk mendukung animasi berjalan di mozilla
@-webkit-keyframes = untuk mendukung animasi @keyframes di safari atau google chrome
@-o-keyframes = untuk mendukung @keyframes berjalan di opera

silahkan teman-teman perhatikan contoh penulisan nya berikut ini.

@keyframes animasi_kotak{

0% {background-color: red; left:0px; top:0px;}

25% {background-color: yellow; left:200px; top:0px;}

50% {background-color: blue; left:0px; top:200px;}

75% {background-color: green; left:200px; top:200px;}

100% {background-color: red; left:0px; top:0px;}

}

@-webkit-keyframes animasi_kotak{

0% {background-color: red; left:0px; top:0px;}

25% {background-color: yellow; left:200px; top:0px;}

50% {background-color: blue; left:0px; top:200px;}

75% {background-color: green; left:200px; top:200px;}

100% {background-color: red; left:0px; top:0px;}

}

@-moz-keyframes animasi_kotak{

0% {background-color: red; left:0px; top:0px;}

25% {background-color: yellow; left:200px; top:0px;}

50% {background-color: blue; left:0px; top:200px;}

75% {background-color: green; left:200px; top:200px;}

100% {background-color: red; left:0px; top:0px;}

}

@-o-keyframes animasi_kotak{

0% {background-color: red; left:0px; top:0px;}

25% {background-color: yellow; left:200px; top:0px;}

50% {background-color: blue; left:0px; top:200px;}

75% {background-color: green; left:200px; top:200px;}

100% {background-color: red; left:0px; top:0px;}

}

Sekian dulu Tutorial CSS3 Part 7 – Membuat Efek Animasi CSS3. terima kasih sudah berkunjung. jika ada yang kurang di pahami, teman-teman bisa meninggalkan komentar.