michaeldank
9/11/2017 - 12:22 AM

Flickerplate - Additional Animation. This is the CSS to make the flick-title fade in and drop down when layer becomes active. You will need

Flickerplate - Additional Animation. This is the CSS to make the flick-title fade in and drop down when layer becomes active. You will need FA1 Javascript. Example:http://www.thecpapshop.com.au/

FA2-flicker-fade-added-animation-text.css
content_copyfile_download
/*----flick animation----*/

.flick-title {
  opacity: 0;
}

.flickerplate li.active .flick-title {
  -webkit-animation: flickAnimation 1s forwards ease-out;
          animation: flickAnimation 1s forwards ease-out;
}

@-webkit-keyframes flickAnimation {
  0% {
    opacity:0;
    filter: alpha(opacity=0); 
    -webkit-transform: translate(0, -2em); 
  }

  100% {
    opacity:1;
    filter: alpha(opacity=100); 
    -webkit-transform: translate(0, 0); 
  }
}

@keyframes flickAnimation {
  0% {
    opacity:0;
    filter: alpha(opacity=0); 
            transform: translate(0, -2em);
  }

  100% {
    opacity:1;
    filter: alpha(opacity=100); 
            transform: translate(0, 0);
  }
}

/*---- end flick animation----*/