How to animate in CSS with Keyframes

Question

I have a problem. My menue should "slide" from left to right, so I have wrote some CSS:

.animate-in {
    animation-name: menue-in;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.animate-out {
    animation-name: menue-out;
    animation-duration: 1s; 
    animation-fill-mode: forwards;
}

@keyframes menue-in {
    from { transform: translateX(-100%);}
    to { transform: translateX(0%);}
  }
@keyframes menue-out {
    from { transform: translateX(0%);}
    to { transform: translateX(-100%);}
}

The Keyframe which is called "menue-in" to move the menue from left to right works fine BUT my keyframe "menus-out" doesn't...

Could somebody help me please?

Here is my JS Code...

"use strict";
document.addEventListener("DOMContentLoaded", function() {
    let toggle = document.getElementsByClassName("toggle")[0];
    let navigation = document.getElementsByClassName("navigation__mobile")[0];
    let showing = false;
    toggle.addEventListener("click", function() {
        navigation.classList.toggle("d-flex");
        if(showing == false) {
            navigation.classList.remove("animate-out");
            navigation.classList.add("animate-in");
            showing = true;
        }
        else {
            navigation.classList.remove("animate-in");
            navigation.classList.add("animate-out");
            showing = false;
        }
    })
})

score 0 · Answer 1 · answered Feb 24 '22 at 16:04

It seems you're looking for animation-fill-mode: forwards; to stop the animation at last frame.

Here's a snippet for your case.
Enjoy. :)

"use strict";
document.addEventListener("DOMContentLoaded", function() {
    let toggle = document.getElementsByClassName("toggle")[0];
    let navigation = document.getElementsByClassName("navigation__mobile")[0];
    let showing = false;
    toggle.addEventListener("click", function() {
        navigation.classList.toggle("d-flex");
        if(showing == false) {
            navigation.classList.remove("animate-out");
            navigation.classList.add("animate-in");
            showing = true;
        }
        else {
            navigation.classList.remove("animate-in");
            navigation.classList.add("animate-out");
            showing = false;
        }
    })
})

.animate-in {
    animation-name: menue-in;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.animate-out {
    animation-name: menue-out;
    animation-duration: 1s; 
    animation-fill-mode: forwards;
}

@keyframes menue-in {
    from { transform: translateX(-100%);}
    to { transform: translateX(0%);}
  }
@keyframes menue-out {
    from { transform: translateX(0%);}
    to { transform: translateX(-100%);}
}

.navigation__mobile {
  width: 200px;
  height: 400px;
  background: red;
  transform: translateX(-100%);
}

<button class="toggle">click</button>
<div class="navigation__mobile">
navaigation
</div>

score 0 · Answer 2 · answered Feb 24 '22 at 16:12

0

You are missing the animation-fill-mode property here. So If you will not use this property then the element will come to the original/default position. But we do not want that so here you can use the animation-mode-fill: forwards property so that element can retain its last position.

Here is the updated css code:

.animate-in {
  animation-name: menue-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.animate-out {
  animation-name: menue-out;
  animation-duration: 1s; 
  animation-fill-mode: forwards;
}

@keyframes menue-in {
  from { transform: translateX(-100%);}
  to { transform: translateX(0%);}
}
@keyframes menue-out {
    from { transform: translateX(0%);}
    to { transform: translateX(-100%);}
}

answered Feb 24 '22 at 16:12

Aakash Giri

53
1
8

it does not work... – MarcoDev Feb 24 '22 at 17:02
@MarcoDev but "coding monster' already provided you a working example. It should work but still if you are facing problem then can you provide your code in codepan.io or somewhere else so I can find problem in your code. – Aakash Giri Feb 24 '22 at 18:20
I have updated the Code – MarcoDev Feb 24 '22 at 20:16
@MarcoDev there is no problem in your updated css code, javascript code is also looks good. Problem is somewhere else maybe in some other css property or in some other part of your code. So if you will provide a complete code which will include html as well as other css property and js code too then it will be easier to find the problem. That is why create a sample of your code in codepan.io or you can upload your code to GitHub. – Aakash Giri Feb 24 '22 at 20:39

How to animate in CSS with Keyframes

2 Answers2