Membuat animasi kucing berjalan dengan css

Tuesday, March 28, 2017

Membuat animasi kucing berjalan dengan css

Posted By: Tuesday, March 28, 2017 2 Comments

Kucing berjalan

Iseng-iseng cari di internet bagaimana membuat animasi dengan menggunakan html dan css, ternyata saya menemukannya di http://codingpintar.blogspot.co.id, walaupun di blog tersebut hanya menyediakan scriptnya dan setelah saya coba ternyata berhasil. jadi deh animasi kucing berjalan.

Namun ketika saya mencoba menjalankannya pada saat offline animasi tersebut tidak berjalan, setelah saya teliti ternyata ada link-link gambar yang harus terkoneksi internet. lalu saya download link-link gambar tersebut.




Membuat animasi kucing berjalan dengan menggunakan kode css, langkah pertama untuk membuat animasi tersebut adalah dengan mempersiapkan gambar, berikut adalah gambar-gambar yang harus ada untuk membuat animasi kucing berjalan.

kucing
tuna_sprite.png

grass
foreground_grass.png
grass
midground_grass.png

mount
background_mountain5.png
mount
background_mountain4.png

mount
background_mountain3.png

mount
background_mountain2.png

mount
background_mountain1.png
clouds
gambar-gambar tersebut simpanlah dalam folder gambar_animasi_kucing_berjalan. setelah itu ketikan kode berikut pada notepad

<!DOCTYPE html>
<html>
<head>
<title>Kucing berjalan</title>
<style>
.tuna {
  animation: walk-cycle 1s steps(12) infinite;
  background: url(tuna_sprite.png ) 0 0 no-repeat;
  height: 200px;
  width: 400px;
  position: relative;
  bottom: 1px;
  left: 60%;
  margin-left: -210px;
  transform: translateZ(0); /* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}

@keyframes walk-cycle { 
  0% {background-position: 0 0; }
  100% {background-position: 0 -2391px; }
}

.foreground, .midground, .background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  translate3d(0,0,0);
}

.foreground {
  animation: parallax_fg linear 10s infinite both;
  background:  url(foreground_grass.png) 0 100% repeat-x;
  z-index: 3;
}

@keyframes parallax_fg { 
  0% { background-position: -3584px 100%;}
  100% {background-position: 0 100%; }
}

.midground {
  animation: parallax_mg linear 20s infinite;
  background:  url(midground_grass.png) 0 100% repeat-x;
  z-index: 2;
}

@keyframes parallax_mg { 
  0% { background-position: -3000px 100%;}
  100% {background-position: 0 100%; }
}

.background {
  background-image:
    url(background_mountain5.png),
    url(background_mountain4.png),
    url(background_mountain3.png),
    url(background_mountain2.png),
    url(background_mountain1.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  animation: parallax_bg linear 40s infinite;
}

@keyframes parallax_bg {
  100% { background-position-x: 2400px, 2000px, 1800px, 1600px, 1200px;}
}

body {
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
    #d2d2d2 url(background_clouds.png);
}
</style>
</head>
<body>
<div class="foreground"></div>

<div class="midground">
  <div class="tuna"></div>
</div>

<div class="background">
</div>
</body>
</html>

Kemudian simpan file tersebut dengan nama animasi_kucing_berjalan.html simpan satu folder dengan gambar tadi.

Di sumber http://codingpintar.blogspot.co.id pembuatan codenya dibuat dengan terpisah, yaitu ada file html dan file css, maka saya coba gabungkan kedua file tersebut menjadi kode di atas, dan alhmadulillah semuanya berjalan lancar. animasi kucing berjalan tersebut bisa dijalankan secara offline. 

sehingga kita bisa mempersentasikannya kode tersebut secara offline pula kepada anak-anak.

Nah itulah cara membuat animasi kucing berjalan, untuk animasi-animasi lainnya bisa kita kembangkan dengan merubah gambar-gambar di atas. selamat mencoba!

di bawah ini adalah contoh animasi kucing berjalan dengan menggunakan html dan css.

2 comments: