™Galery™

Kelanjutan dari yang sebelumnya saya hanya ingin memberi sedikit penjelasan tentang keyframes, dan maaf kalau ini hanya sekedar dari pengalaman saja pada teorinya.
Contoh:

yang sebelumnya di artikel Membuat Efek gambar jatuh dengan @keyframes. dari artikel tersebut kita menggunakan Selector from dan to dari bahasa nya juga berarti dari css ini dan ke css ini , bisa dilihat pada source berikut:

.content-padding a img {
animation: imgdown 3s;
-moz-animation: imgdown 3s; /* Firefox */
-webkit-animation: imgdown 3s; /* Safari and Chrome */
-ms-animation: imgdown 3s;
}

@keyframes imgdown
{
from{transform:translate(0px, -9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes imgdown
{
from{-moz-transform:translate(0px, -9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes imgdown
{
from{-webkit-transform:translate(0px, -9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
@-ms-keyframes imgdown
{
from{-webkit-transform:translate(0px, -9000px)}
to{-webkit-transform:translate(0px, 0px)}
} 

 Berarti hanya ada dua selector pemnggilan css, nah sekarang saya akan berikan contoh yang memakai lebih dari dua selector. Lihat contoh source berikut:

.content-padding a img {
animation: imgdown 4s;
-moz-animation: imgdown 4s; /* Firefox */
-webkit-animation: imgdown 4s; /* Safari and Chrome */
-ms-animation: imgdown 4s; /* IE 9 */
}

@keyframes imgdown
{
0%{transform:translate(0px, -9000px)
}
25% {transform:rotate(30deg)
}
50% {transform:rotate(50deg)
}
100%{transform:translate(0px, 0px)}
}
@-moz-keyframes imgdown
{
0%{-moz-transform:translate(0px, -9000px);
}
25% {-moz-transform:rotate(30deg);
}
50% {-moz-transform:rotate(50deg);
}
100%{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes imgdown
{
0%{-webkit-transform:translate(0px, -9000px);
}
25% {-webkit-transform:rotate(30deg);
}
50% {-moz-transform:rotate(50deg);
}
100%{-webkit-transform:translate(0px, 0px)}
}
@-ms-keyframes imgdown
{
0%{-webkit-transform:translate(0px, -9000px);}
25% {-webkit-transform:rotate(30deg);
}
50% {-moz-transform:rotate(50deg);
}
100%{-webkit-transform:translate(0px, 0px)}
}

dari kode yang saya beri warna hijau mungkin sudah membuat kawan-kawan tahu perbedaan dan kegunaanya dari yang sebelumnya menggunakan Selector from dan to. Perbedaanya kita memakai selector %, kita bisa bagi-bagi pemanggilan proses persen keberapa pemnggilan css nya dengan style css yang berbeda masing-masing, contoh pada saat 0%, 25%, 50%, 75%, 100%.
Kalau Bingung pilih-pilih CSS nya Lihat saja di: