Showing posts with label keyframes. Show all posts
Showing posts with label keyframes. Show all posts

Monday, December 19, 2016

Cara Membuat Efek Loading Dengan Animasi Keyframes

Cara Membuat Efek Loading Dengan Animasi Keyframes



Keyframe | Pada kesempatan kali ini saya akan membagikan tutorial cara membuat animasi loading pada blog. Sebenarnya sudah banyak para Blogger yang menggunakan Animasi Loading Blog akan tetapi banyak yang berbeda. Rata-rata para Blogger menerapkannya dengan JavaScript, Dan saya akan membuatnya berbeda yaitu menggunakan CSS murni tanpa JavaScript sedikitpun.

Animation Bounce and Rotate

Langkah 1 : Cari kode ]]></b:skin>
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes BounceRate{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

Langkah 3 : Sisipkan kode animation:BounceRate 3s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : BounceRate 3s; }
Langkah 4 : Save Template

Animation Earthquake Effect

Langkah 1 : Cari kode ]]></b:skin
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes Earthquake{
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(5deg);}
20%{opacity:1;transform:rotate(-5deg);}
25%{opacity:1;transform:rotate(5deg);}
30%{opacity:1;transform:rotate(-5deg);}
35%{opacity:1;transform:rotate(-5deg);}
40%{opacity:1;transform:rotate(5deg);}
45%{opacity:1;transform:rotate(-5deg);}
50%{opacity:1;transform:rotate(5deg);}
55%{opacity:1;transform:rotate(-5deg);}
60%{opacity:1;transform:rotate(5deg);}
65%{opacity:1;transform:rotate(-5deg);}
70%{opacity:1;transform:rotate(5deg);}
80%{opacity:1;transform:rotate(-5deg);}
85%{opacity:1;transform:rotate(5deg);}
90%{opacity:1;transform:rotate(-5deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}

Langkah 3 : Sisipkan kode animation : Earthquake 3s ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : Earthquake 3s; }
Langkah 4 : Save Template

Animation Sliding Effect

Langkah 1 : Cari kode ]]></b:skin>
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes Sliding{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

Langkah 3 : Sisipkan kode animation : Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : Sliding 2s; }
Langkah 4 : Save Template
Source: the-anarchyta.blogspot.com

Go to link Download

Read more »
Posted by at
Labels: , , , , , ,

Wednesday, November 2, 2016

Cara Membuat Loading Blog Keren Dengan Keyframes

Cara Membuat Loading Blog Keren Dengan Keyframes


  1. Buka Blogger.com,Login Dengan Akun Anda
  2. Buka rancangan,Pilih Edit Html,Cari Kode ]]></b:skin> letakkan kode di bawah ini diatas kode  ]]></b:skin>
#wrapper, #sidebar {
-webkit-animation: css3Animasi 4s ease-in;
-moz-animation: css3Animasi 4s ease-in;
-ms-animation: css3Animasi 4s ease-in;
-o-animation: css3Animasi 4s ease-in;
animation: css3Animasi 4s ease-in
}
@-webkit-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-moz-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-ms-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-o-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}

NB :Kode yang berwarna merah bisa anda ganti berdasarkan kode dari setiap elemen template mu 

Sumber

Go to link Download

Read more »
Posted by at
Labels: , , , , , ,
Subscribe to: Posts (Atom)