Membuat Dampak Animasi Loading Sederhana Dengan Css3 Animasi

Published by Concept Phone Kamis, 30 Agustus 2018

frame animasi. Kemudian, cukup panggil setiap dampak animasi yang Anda buat ke elemen-elemen yang Anda inginkan. Saya pikir metode ini jauh lebih kondusif dibandingkan dengan metode animasi loading pembukaan halaman memakai JavaScript.

Metode 1: Menggunakan Efek Transparasi

/* Declare the element dimension. These are just examples. You can use all elements that already on the website */ #box1 {   width:300px;   height:300px;   background-color:#000;   margin:0 auto; }  /* Step 1: Build the Animation */ @-webkit-keyframes aniload {   from {opacity:0}   to   {opacity:1} }  @-moz-keyframes aniload {   from {opacity:0}   to   {opacity:1} }  @-ms-keyframes aniload {   from {opacity:0}   to   {opacity:1} }  @-o-keyframes aniload {   from {opacity:0}   to   {opacity:1} }  @keyframes aniload {   from {opacity:0}   to   {opacity:1} }  /* Step 2: Call the Animation */ #box1 {   -webkit-animation:aniload 4s;   -moz-animation:aniload 4s;   -ms-animation:aniload 4s;   -o-animation:aniload 4s;   animation:aniload 4s; }

Lihat Demo

Metode 2: Menggunakan Transformasi Translate

/* Declare the element dimension */ #box1 {   width:300px;   height:300px;   background-color:#000;   margin:0 auto; }  /* Step 1: Build the Animation */ @-webkit-keyframes aniload {   from {-webkit-transform:translate(0px, 1000px)}   to   {-webkit-transform:translate(0px, 0px)} }  @-moz-keyframes aniload {   from {-moz-transform:translate(0px, 1000px)}   to   {-moz-transform:translate(0px, 0px)} }  @-ms-keyframes aniload {   from {-ms-transform:translate(0px, 1000px)}   to   {-ms-transform:translate(0px, 0px)} }  @-o-keyframes aniload {   from {-o-transform:translate(0px, 1000px)}   to   {-o-transform:translate(0px, 0px)} }  @keyframes aniload {   from {transform:translate(0px, 1000px)}   to   {transform:translate(0px, 0px)} }  /* Step 2: Call the Animation */ #box1 {   -webkit-animation:aniload 4s;   -moz-animation:aniload 4s;   -ms-animation:aniload 4s;   -o-animation:aniload 4s;   animation:aniload 4s; }

Lihat Demo

Metode 3: Menggunakan Durasi Animasi yang Berbeda-Beda

Masih sama persis dengan metode ke dua, hanya saja di sini Saya memakai durasi animasi yang berbeda-beda pada setiap elemen:

/* Declare the element dimension */ .box {   width:300px;   height:300px;   background-color:#000;   margin:0 auto; }  /* Step 1: Build the Animation */ @-webkit-keyframes aniload {   from {-webkit-transform:translate(0px, 1000px)}   to   {-webkit-transform:translate(0px, 0px)} }  @-moz-keyframes aniload {   from {-moz-transform:translate(0px, 1000px)}   to   {-moz-transform:translate(0px, 0px)} }  @-ms-keyframes aniload {   from {-ms-transform:translate(0px, 1000px)}   to   {-ms-transform:translate(0px, 0px)} }  @-o-keyframes aniload {   from {-o-transform:translate(0px, 1000px)}   to   {-o-transform:translate(0px, 0px)} }  @keyframes aniload {   from {transform:translate(0px, 1000px)}   to   {transform:translate(0px, 0px)} }  /* Step 2: Call the Animation */ #box1 {   -webkit-animation:aniload 4s;   -moz-animation:aniload 4s;   -ms-animation:aniload 4s;   -o-animation:aniload 4s;   animation:aniload 4s; }  #box2 {   -webkit-animation:aniload 1s;   -moz-animation:aniload 1s;   -ms-animation:aniload 1s;   -o-animation:aniload 1s;   animation:aniload 1s; }  #box3 {   -webkit-animation:aniload 5s;   -moz-animation:aniload 5s;   -ms-animation:aniload 5s;   -o-animation:aniload 5s;   animation:aniload 5s; }  #box4 {   -webkit-animation:aniload 3s;   -moz-animation:aniload 3s;   -ms-animation:aniload 3s;   -o-animation:aniload 3s;   animation:aniload 3s; }  #box5 {   -webkit-animation:aniload 2s;   -moz-animation:aniload 2s;   -ms-animation:aniload 2s;   -o-animation:aniload 2s;   animation:aniload 2s; }

Lihat Demo

Download Files

Sumber https://www.dte.web.id/