Multiple CSS animations on an element

Groen91 Published at Dev

Groen91

I have this short piece of code which fades out my navigation bar. Everything is working fine.

The visible part:

.navigation-visible {
    position: fixed;
    top: 0;
    left: 0;
    background: blue;

   -webkit-opacity: 1;
   -moz-opacity: 1;
    opacity: 1;
}

The part when it's hidden:

.navigation-not-visible {
    position: fixed;
    top: 0;
    left: 0;
    background: blue;

   -webkit-opacity: 0;
   -moz-opacity: 0;
    opacity: 0;
   -webkit-transition: all 800ms ease;
   -moz-transition: all 800ms ease;
   -ms-transition: all 800ms ease;
   -o-transition: all 800ms ease;
   transition: all 800ms ease;
}

What I'd like to do now, is to add a another animation which directly moves my navigation bar -100px to the top after it has been faded out.

So I tried this code, but of course I failed miserably.

-webkit-transition: all 800ms ease, position translateY(-100%);

The big question: What am I doing wrong here?

Jonathan

Depending on your needed browser support, you could use CSS3 animations. This also requires a little JavaScript, but I'm assuming that you already are using JavaScript if you are changing the class name?

<div class="navigation-not-visible" id="navigation" style="display:none;">
  Navigation  ;)
</div>

<div id="quadraflunk"><br/>Smile and click me</div>

<style type="text/css">

  .navigation-visible {
    position: fixed;
    top: 0;
    left: 0;
    background: blue;

    opacity: 1;
  }

  .navigation-not-visible {
    position: fixed;
    top: -100%;
    left: 0;
    background: blue;

    opacity: 0.2;
   -webkit-transition: all 800ms ease;
   -moz-transition: all 800ms ease;
   -ms-transition: all 800ms ease;
   -o-transition: all 800ms ease;
   transition: all 800ms ease;
    animation-name: example;
    animation-duration: 800ms;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 800ms; /* Chrome, Safari, Opera */
  }

  @keyframes example {
    0%   {opacity: 1;top:0;}
    99%  {opacity: 0;top:0;}
    100% {top: -100%;}
  }
  @-webkit-keyframes example {
    0%   {opacity: 1;top:0;}
    99%  {opacity: 0;top:0;}
    100% {top: -100%;}
  }
</style>

<script type="text/javascript">
  document.getElementById("quadraflunk").onclick = function() {
    if (document.getElementById("navigation").className == "navigation-visible") {
      document.getElementById("navigation").className = "navigation-not-visible";
    }
    else {
      document.getElementById("navigation").style.display = "";
      document.getElementById("navigation").className = "navigation-visible";
    }
  }
</script>

Here's a little fiddle to demonstrate: https://jsfiddle.net/bruwpaaz/

Collected from the Internet

Please contact [email protected] to delete if infringement.