Multiple CSS animations on an element

Question

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?

did you check the docs on transition? Are you just guessing? position isn't how you move an element. translateY() goes with transform, and what you're looking to change is the top rule. — zzzzBov
– zzzzBov, Commented May 22, 2015 at 22:32
This position translateY(-100%) thing is working fine when I use it single, but I need it in combination with ease. First fade it out and then move it 100px to the top. — Groen91
– Groen91, Commented May 22, 2015 at 22:38

Jonathan · Accepted Answer · 2015-05-22 23:30:29Z

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/

Samurai · Accepted Answer · 2015-05-22 23:30:46Z

1

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.

answered May 22, 2015 at 23:30

Samurai

3,7295 gold badges29 silver badges41 bronze badges

Collectives™ on Stack Overflow

Multiple CSS animations on an element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related