CODEWITHSUNDEEP
htmlcssanimation
Groen91
Groen91

Reputation: 95

Multiple CSS animations on an element

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?

Upvotes: 2

Views: 150

Answers (2)

Samurai
Samurai

Reputation: 3754

transition: opacity 800ms ease, transform 1s ease;
transition-delay: 0s, 800ms;
transform: translateY(-100px);

Since the element is faded first you won't see the transform, but you get the idea.

Upvotes: 1

Jonathan
Jonathan

Reputation: 6537

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/

Upvotes: 1

Related Questions