Animasi CSS3 @Keyframes FadeIn

 Author : hadinug, 17 February, 2014, Komentar

Ditutorial sebelumnya penulis telah menuliskan tentang bagaimana cara membuat animasi keyframe di CSS 3 secara dasar mulai dari sintak dasar, hingga studi kausus pembuatan animasi Flash pada css. Nah pada kesempatan ini penulis akan melakukan sedikit improvisasi, membuat animasi FadeIn pada CSS dengan berbagai bentuk dan varian yang bisa di manfaatkan.



Kita mulai dengan animasi sederhana FadeIn basic, lihat kode selengkapnya berikut ini


@-webkit-keyframes fadeIn {
    0% {opacity: 0;}	
100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
    0% {opacity: 0;}	
100% {opacity: 1;}
}

@-o-keyframes fadeIn {
    0% {opacity: 0;}	
100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}	
100% {opacity: 1;}
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
}


Berkitunya kita akan menambahkan sedikit translateX dana translateY pada CSS fadeIn dengan membuat animasi FadeInUp, FadeInUpBig, FadeInDown, FadeInDownBIg, FadeInLeft, FadeInLeftBig, FadeInRight, FadeInRightBig


@-webkit-keyframes fadeInUp {
    0% {
    opacity: 1;
    -webkit-transform: translateY(20px);
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInUp {
    0% {
    opacity: 1;
    -moz-transform: translateY(20px);
}

100% {
    opacity: 1;
    -moz-transform: translateY(0);
}
}

@-o-keyframes fadeInUp {
    0% {
    opacity: 1;
    -o-transform: translateY(20px);
}

100% {
    opacity: 1;
    -o-transform: translateY(0);
}
}

@keyframes fadeInUp {
    0% {
    opacity: 1;
    transform: translateY(20px);
}

100% {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
    0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInDown {
    0% {
    opacity: 1;
    -moz-transform: translateY(-20px);
}

100% {
    opacity: 1;
    -moz-transform: translateY(0);
}
}

@-o-keyframes fadeInDown {
    0% {
    opacity: 1;
    -o-transform: translateY(-20px);
}

100% {
    opacity: 1;
    -o-transform: translateY(0);
}
}

@keyframes fadeInDown {
    0% {
    opacity: 1;
    transform: translateY(-20px);
}

100% {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
    0% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
}
}

@-moz-keyframes fadeInLeft {
    0% {
    opacity: 1;
    -moz-transform: translateX(-20px);
}

100% {
    opacity: 1;
    -moz-transform: translateX(0);
}
}

@-o-keyframes fadeInLeft {
    0% {
    opacity: 1;
    -o-transform: translateX(-20px);
}

100% {
    opacity: 1;
    -o-transform: translateX(0);
}
}

@keyframes fadeInLeft {
    0% {
    opacity: 1;
    transform: translateX(-20px);
}

100% {
    opacity: 1;
    transform: translateX(0);
}
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
    0% {
    opacity: 1;
    -webkit-transform: translateX(20px);
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
}
}

@-moz-keyframes fadeInRight {
    0% {
    opacity: 1;
    -moz-transform: translateX(20px);
}

100% {
    opacity: 1;
    -moz-transform: translateX(0);
}
}

@-o-keyframes fadeInRight {
    0% {
    opacity: 1;
    -o-transform: translateX(20px);
}

100% {
    opacity: 1;
    -o-transform: translateX(0);
}
}

@keyframes fadeInRight {
    0% {
    opacity: 1;
    transform: translateX(20px);
}

100% {
    opacity: 1;
    transform: translateX(0);
}
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUpBig {
    0% {
    opacity: 1;
    -webkit-transform: translateY(2000px);
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInUpBig {
    0% {
    opacity: 1;
    -moz-transform: translateY(2000px);
}

100% {
    opacity: 1;
    -moz-transform: translateY(0);
}
}

@-o-keyframes fadeInUpBig {
    0% {
    opacity: 1;
    -o-transform: translateY(2000px);
}

100% {
    opacity: 1;
    -o-transform: translateY(0);
}
}

@keyframes fadeInUpBig {
    0% {
    opacity: 1;
    transform: translateY(2000px);
}

100% {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    -moz-animation-name: fadeInUpBig;
    -o-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInDownBig {
    0% {
    opacity: 1;
    -webkit-transform: translateY(-2000px);
}

100% {
    opacity: 1;
    -webkit-transform: translateY(0);
}
}

@-moz-keyframes fadeInDownBig {
    0% {
    opacity: 1;
    -moz-transform: translateY(-2000px);
}

100% {
    opacity: 1;
    -moz-transform: translateY(0);
}
}

@-o-keyframes fadeInDownBig {
    0% {
    opacity: 1;
    -o-transform: translateY(-2000px);
}

100% {
    opacity: 1;
    -o-transform: translateY(0);
}
}

@keyframes fadeInDownBig {
    0% {
    opacity: 1;
    transform: translateY(-2000px);
}

100% {
    opacity: 1;
    transform: translateY(0);
}
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    -moz-animation-name: fadeInDownBig;
    -o-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeftBig {
    0% {
    opacity: 1;
    -webkit-transform: translateX(-2000px);
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeftBig {
    0% {
    opacity: 1;
    -moz-transform: translateX(-2000px);
}

100% {
    opacity: 1;
    -moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeftBig {
    0% {
    opacity: 1;
    -o-transform: translateX(-2000px);
}

100% {
    opacity: 1;
    -o-transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
    0% {
    opacity: 1;
    transform: translateX(-2000px);
}

100% {
    opacity: 1;
    transform: translateX(0);
}
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    -moz-animation-name: fadeInLeftBig;
    -o-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRightBig {
    0% {
    opacity: 1;
    -webkit-transform: translateX(2000px);
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
}
}

@-moz-keyframes fadeInRightBig {
    0% {
    opacity: 1;
    -moz-transform: translateX(2000px);
}

100% {
    opacity: 1;
    -moz-transform: translateX(0);
}
}

@-o-keyframes fadeInRightBig {
    0% {
    opacity: 1;
    -o-transform: translateX(2000px);
}

100% {
    opacity: 1;
    -o-transform: translateX(0);
}
}

@keyframes fadeInRightBig {
    0% {
    opacity: 1;
    transform: translateX(2000px);
}

100% {
    opacity: 1;
    transform: translateX(0);
}
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    -moz-animation-name: fadeInRightBig;
    -o-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}


Untuk melihat hasil demonya disini. Semoga hal sederhana ini bermanfaat dan bisa menginspirasi teman-teman untuk membuat berbagai bentuk animasi dengan CSS3 keyframes.


 
Bagikan halaman ke sosial media
 
Tags :   css    css-keyframes    animation       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda