stefan22
11/19/2017 - 9:19 AM

- Slide banner on page load with CSS @keyframes - call keyframe inside of another class using property animation

  • Slide banner on page load with CSS @keyframes
  • call keyframe inside of another class using property animation
keyframesAnimations.css
content_copyfile_download
<style type="text/css" rel="stylesheet">

/*from bottom in up to bottom of page*/
@keyframes slideInFromBottom {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0);
  }
} 

/*loaded sideways*/
@keyframes slideInFromBottom {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}


   
.fadein {
    opacity: 0;
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
    background-color: #333;
    transition:background-color 2s ease-in;
    
    
}

#body.loaded .fadein {
    opacity: 1;
}
.notloaded {
   opacity: 0;
}

#bigfoot.banup {
   animation: 2s ease-in 0s 1 slideInFromTop;
   background-color:  rgb(2, 20, 22);
   transition:background 2s ease-out;
}
</style>

/*  <body>     inside of the body near end    */

<script type="text/javascript">
   
   window.addEventListener('load',function() {
      debugger;
      if(document.body.className == "notloaded") {
         
         var banup = setTimeout(function() {
            document.getElementById('bigfoot').
            className = "banup";
            document.body.className = "loaded";
         },2000);
         
      }//not-loaded
      
      
      
   });
</script>   
</body>