Fade and Slide in Effect for Avatars

This effect was inspired from Wild4KittenTK 

Want your avatar to slide in upon your profile page loading like this...?

well here's how you do it...

 

First, when you go to your custom css page, you'll see a chunk of code that should look something like this:

Now this is what the code looks like from MFC's default code, if you've already customized your profile, it may look a little different, but the code will always begin with "body {"


You will need to copy n' paste this code somewhere inside that chunk of code:

  padding:0;
  margin:0;
  opacity:0;
  -webkit-animation:fadeload ease 1;
  -moz-animation:fadeload ease 1;
  animation:fadeload ease 1;
  -o-animation:fadeload ease 1;
  -ms-animation:fadeload ease 1;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  -o-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  -ms-animation-fill-mode:forwards;
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -o-animation-duration:2s;
  animation-duration:2s;
  -ms-animation-duration:2s;
  -webkit-animation-delay:1.5s;
  -moz-animation-delay:1.5s;
  -o-animation-delay:1.5s;
  animation-delay:1.5s;
  -ms-animation-delay:1.5s;

For example, if my code looked like this:

body {
  background-color: #ffffff;
  background-color: #9AC956;
  color: #666666;
  font-family: 'Verdana';
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
}


I would need to paste it in between the brackets of that code, like this:

body {
  background-color: #ffffff;
  background-color: #9AC956;
  color: #666666;
  font-family: 'Verdana';
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  padding:0;
  margin:0;
  opacity:0;
  -webkit-animation:fadeload ease 1;
  -moz-animation:fadeload ease 1;
  animation:fadeload ease 1;
  -o-animation:fadeload ease 1;
  -ms-animation:fadeload ease 1;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  -o-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  -ms-animation-fill-mode:forwards;
  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  -o-animation-duration:2s;
  animation-duration:2s;
  -ms-animation-duration:2s;
  -webkit-animation-delay:1.5s;
  -moz-animation-delay:1.5s;
  -o-animation-delay:1.5s;
  animation-delay:1.5s;
  -ms-animation-delay:1.5s;
}



Then just add this anywhere in your custom css:

#avatar_holder {
  width:100px;
  height:100px;
  margin-bottom:-10px;
  margin-left:19px;
}

#profile_avatar {
  width:100px;
  height:100px;
  padding:1px;
  background-color:rgba(0,0,0,0.58);
  border:1px solid rgba(5,5,5,1);
  box-shadow:-1px 1px 3px rgba(0,0,0,1),1px -1px 3px rgba(0,0,0,1);
  animation-name:slidein;
  -webkit-animation-name:slidein;
  -moz-animation-name:slidein;
  -o-animation-name:slidein;
  -ms-animation-name:slidein;
  animation-duration:3s;
  -webkit-animation-duration:3s;
  -moz-animation-duration:3s;
  -o-animation-duration:3s;
  -ms-animation-duration:3s;
  animation-delay:1.55s;
  -webkit-animation-delay:1.55s;
  -moz-animation-delay:1.55s;
  -o-animation-delay:1.55s;
  -ms-animation-delay:1.55s;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
  -moz-animation-timing-function:ease-in-out;
  -o-animation-timing-function:ease-in-out;
  -ms-animation-timing-function:ease-in-out;
  visibility:visible!important;
}

/* ================================================================
                                                   Loader
   =============================================================== */
@-webkit-keyframes fadeload {
  from {
    opacity:0;
  }
 
  to {
    opacity:1;
  }
}

@-moz-keyframes fadeload {
  from {
    opacity:0;
  }
 
  to {
    opacity:1;
  }
}

@-o-animation fadeload {
  fromopacity:0;
}

to {
  opacity:1;
}
}

@keyframes fadeload {
  from {
    opacity:0;
  }
 
  to {
    opacity:1;
  }
}

@-ms-keyframes fadeload {
  from {
    opacity:0;
  }
 
  to {
    opacity:1;
  }
}

.fade-load {
  opacity:0;
  -webkit-animation:fadeload ease 1;
  -moz-animation:fadeload ease 1;
  -o-animation:fadeload ease 1;
  animation:fadeload ease 1;
  -ms-animation:fadeload ease 1s;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  -o-animation:forwards;
  animation-fill-mode:forwards;
  -ms-animation-fill-mode:forwards;
  animation-duration:1s;
  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  -o-animation-duration:1s;
  -ms-animation-duration:1s;
}

.fade-load.one {
  animation-delay:3s;
  -webkit-animation-delay:3s;
  -moz-animation-delay:3s;
  -o-animation-delay:3s;
  -ms-animation-delay:3s;
}

.fade-load.two {
  animation-delay:3.2s;
  -webkit-animation-delay:3.2s;
  -moz-animation-delay:3.2s;
  -o-animation-delay:3.2s;
  -ms-animation-delay:3.2s;
}

.fade-load.three {
  animation-delay:3.4s;
  -webkit-animation-delay:3.4s;
  -moz-animation-delay:3.4s;
  -o-animation-delay:3.4s;
  -ms-animation-delay:3.4s;
}

.fade-load.four {
  animation-delay:3.6s;
  -webkit-animation-delay:3.6s;
  -moz-animation-delay:3.6s;
  -o-animation-delay:3.6s;
  -ms-animation-delay:3.6s;
}

.fade-load.five {
  animation-delay:3.8s;
  -webkit-animation-delay:3.8s;
  -moz-animation-delay:3.8s;
  -o-animation-delay:3.8s;
  -ms-animation-delay:3.8s;
}

.fade-load.six {
  animation-delay:4s;
  -webkit-animation-delay:4s;
  -moz-animation-delay:4s;
  -o-animation-delay:4s;
  -ms-animation-delay:4s;
}

.fade-load.seven {
  animation-delay:4.2s;
  -webkit-animation-delay:4.2s;
  -moz-animation-delay:4.2s;
  -o-animation-delay:4.2s;
  -ms-animation-delay:4.2s;
}

.fade-load.eight {
  animation-delay:4.4s;
  -webkit-animation-delay:4.4s;
  -moz-animation-delay:4.4s;
  -o-animation-delay:4.4s;
  -ms-animation-delay:4.6s;
}

.fade-load.nine {
  animation-delay:4.6s;
  -webkit-animation-delay:4.6s;
  -moz-animation-delay:4.6s;
  -o-animation-delay:4.6s;
  -ms-animation-delay:4.6s;
}

.fade-load.ten {
  animation-delay:5s;
  -webkit-animation-delay:5s;
  -moz-animation-delay:5s;
  -o-animation-delay:5s;
  -ms-animation-delay:5s;
}

/* ==============================================
                                 slideup
============================================== */
.slideup {
  animation-name:slideup;
  -webkit-animation-name:slideup;
  -moz-animation-name:slideup;
  -o-animation-name:slideup;
  -ms-animation-name:slideup;
  -webkit-perspective:1000;
  -webkit-backface-visibility:hidden;
  visibility:visible!important;
}

@keyframes slideup {
  0% {
    transform:translateY(100%) scaleX(0.5);
    opacity:0;
  }
 
  50% {
    transform:translateY(-8%) scaleX(0.75);
    opacity:0,75;
  }
 
  60% {
    transform:translateY(2%) scaleX(0.85);
  }
 
  70% {
    transform:translateY(0%) scaleX(1.1);
  }
 
  80% {
    transform:translateY(0%) scaleX(0.9);
  }
 
  85% {
    transform:translateY(0%) scaleX(1.05);
  }
 
  90% {
    transform:translateY(0%) scaleX(0.95);
  }
 
  95% {
    transform:translateY(0%) scaleX(1.02);
  }
 
  100% {
    transform:translateY(0%) scaleX(1);
  }
}

@-webkit-keyframes slideup {
  0% {
    transform:translateY(100%) scaleX(0.5);
    opacity:0;
  }
 
  50% {
    transform:translateY(-8%) scaleX(0.75);
    opacity:0,75;
  }
 
  60% {
    transform:translateY(2%) scaleX(0.85);
  }
 
  70% {
    transform:translateY(0%) scaleX(1.1);
  }
 
  80% {
    transform:translateY(0%) scaleX(0.9);
  }
 
  85% {
    transform:translateY(0%) scaleX(1.05);
  }
 
  90% {
    transform:translateY(0%) scaleX(0.95);
  }
 
  95% {
    transform:translateY(0%) scaleX(1.02);
  }
 
  100% {
    transform:translateY(0%) scaleX(1);
  }
}

@-o-keyframes slideup {
  0% {
    transform:translateY(100%) scaleX(0.5);
    opacity:0;
  }
 
  50% {
    transform:translateY(-8%) scaleX(0.75);
    opacity:0,75;
  }
 
  60% {
    transform:translateY(2%) scaleX(0.85);
  }
 
  70% {
    transform:translateY(0%) scaleX(1.1);
  }
 
  80% {
    transform:translateY(0%) scaleX(0.9);
  }
 
  85% {
    transform:translateY(0%) scaleX(1.05);
  }
 
  90% {
    transform:translateY(0%) scaleX(0.95);
  }
 
  95% {
    transform:translateY(0%) scaleX(1.02);
  }
 
  100% {
    transform:translateY(0%) scaleX(1);
  }
}

@-ms-keyframes slideup {
  0% {
    transform:translateY(100%) scaleX(0.5);
    opacity:0;
  }
 
  50% {
    transform:translateY(-8%) scaleX(0.75);
    opacity:0,75;
  }
 
  60% {
    transform:translateY(2%) scaleX(0.85);
  }
 
  70% {
    transform:translateY(0%) scaleX(1.1);
  }
 
  80% {
    transform:translateY(0%) scaleX(0.9);
  }
 
  85% {
    transform:translateY(0%) scaleX(1.05);
  }
 
  90% {
    transform:translateY(0%) scaleX(0.95);
  }
 
  95% {
    transform:translateY(0%) scaleX(1.02);
  }
 
  100% {
    transform:translateY(0%) scaleX(1);
  }
}

@-moz-keyframes slideup {
  0% {
    transform:translateY(100%) scaleX(0.5);
    opacity:0;
  }
 
  50% {
    transform:translateY(-8%) scaleX(0.75);
    opacity:0,75;
  }
 
  60% {
    transform:translateY(2%) scaleX(0.85);
  }
 
  70% {
    transform:translateY(0%) scaleX(1.1);
  }
 
  80% {
    transform:translateY(0%) scaleX(0.9);
  }
 
  85% {
    transform:translateY(0%) scaleX(1.05);
  }
 
  90% {
    transform:translateY(0%) scaleX(0.95);
  }
 
  95% {
    transform:translateY(0%) scaleX(1.02);
  }
 
  100% {
    transform:translateY(0%) scaleX(1);
  }
}

/* ==============================================
                        slide in
============================================== */
@keyframes slidein {
  0% {
    -webkit-transform:translateX(700%);
    opacity:.1;
  }
 
  65% {
    -webkit-transform:translateX(4%);
    opacity:.85;
  }
 
  80% {
    -webkit-transform:translateX(0%);
    opacity:.9;
  }
 
  90% {
    -webkit-transform:translateX(5%);
    opacity:.95;
  }
 
  100% {
    -webkit-transform:translateX(0%);
    opacity:1;
  }
}

@-webkit-keyframes slidein {
  0% {
    -webkit-transform:translateX(700%);
    opacity:.1;
  }
 
  65% {
    -webkit-transform:translateX(4%);
    opacity:.85;
  }
 
  80% {
    -webkit-transform:translateX(-5%);
    opacity:.9;
  }
 
  95% {
    -webkit-transform:translateX(2%);
    opacity:.95;
  }
 
  100% {
    -webkit-transform:translateX(0%);
    opacity:1;
  }
}

@-ms-keyframes slidein {
  0% {
    -webkit-transform:translateX(700%);
    opacity:.1;
  }
 
  65% {
    -webkit-transform:translateX(4%);
    opacity:.85;
  }
 
  80% {
    -webkit-transform:translateX(-5%);
    opacity:.9;
  }
 
  95% {
    -webkit-transform:translateX(2%);
    opacity:.95;
  }
 
  100% {
    -webkit-transform:translateX(0%);
    opacity:1;
  }
}

@-o-keyframes slidein {
  0% {
    -webkit-transform:translateX(700%);
    opacity:.1;
  }
 
  65% {
    -webkit-transform:translateX(4%);
    opacity:.85;
  }
 
  80% {
    -webkit-transform:translateX(-5%);
    opacity:.9;
  }
 
  95% {
    -webkit-transform:translateX(2%);
    opacity:.95;
  }
 
  100% {
    -webkit-transform:translateX(0%);
    opacity:1;
  }
}

@-moz-keyframes slidein {
  0% {
    -webkit-transform:translateX(700%);
    opacity:.1;
  }
 
  65% {
    -webkit-transform:translateX(4%);
    opacity:.85;
  }
 
  80% {
    -webkit-transform:translateX(-5%);
    opacity:.9;
  }
 
  95% {
    -webkit-transform:translateX(2%);
    opacity:.95;
  }
 
  100% {
    -webkit-transform:translateX(0%);
    opacity:1;
  }
}