`display: none` not working in css animation?

Question

I wrote a little code to have cards fade out and then be set to display: none; once clicked so it's not shown in the DOM after it has faded out. Although animation-fill-mode: forwards; works, but only the change on the displayelement seems to have no effect; if you hover over the area the cursor is still there, and the element is still shown in dev tools. Is there a way to make sure that the display: none;property is set properly?

CodePen Here

HTML <div></div>

CSS

body {
 background: black;
  margin-top: 4rem;
}

div {
  display: block;
  background: red;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.hidden {
  animation: hiddenTransition 300ms ease-in;
  animation-fill-mode: forwards; // DOESN'T WORK :C
  will-change: opacity, transform, display;
  cursor: pointer;
}

@keyframes hiddenTransition {
  0% {
    opacity: 1;
    transform: none;
    display: block;
  }
  99% {
    opacity: 0;
    transform: translateY(20%);
    display: block;
  }

  100% {
    opacity: 0;
    transform: translateY(20%);
    display: none;
  }  
}

JS

  var square = document.querySelector("div");

  square.addEventListener("click", function(){
    this.classList.toggle("hidden");
  });

I think you will need to trigger the display none separately after the animation has completed. Take a look at the answers to [this similar question](https://stackoverflow.com/questions/18601648/javascript-display-none-after-css3-animation) to show you how to do this. — David, Nov 24 '17 at 16:00

score 1 · Answer 1 · answered Nov 24 '17 at 16:05

working code pen here

Note:-display property can't be animated

body {
  background: black;
  margin-top: 4rem;
}

div {
  display: block;
  background: red;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.hidden {
  animation: hiddenTransition 300ms ease-in;
  animation-fill-mode: forwards; // DOESN'T WORK :C
  will-change: opacity, transform, display;
  cursor: pointer;
}


@keyframes hiddenTransition {
  0% {

    transform: none;
    visibility:visible;
  }
  99% {

    transform: translateY(20%);

    visibility:visible;
  }

  100% {

    transform: translateY(20%);
    visibility:hidden;
  }  
}

Unfortunately that doesn't solve anything for me because it still takes up space in the window — Precast Dragon, Nov 24 '17 at 16:30

score 0 · Answer 2 · answered Nov 24 '17 at 15:59

0

Even if you set display: none, the element still will be present in devtools. Regarding the cursor, just change cursor display to default in the hidden class. Like so: cursor: default;

answered Nov 24 '17 at 15:59

Vitiok

84
7

It's present as in it still shows up in the browser window and is still clickable. If I change the opacity in the animation to something that's not 0, it's still clearly visible, so therefore it's clear that the `display: none` is simply not being applied. – Precast Dragon Nov 24 '17 at 16:05
display: none - has no effect on layout.(according to [w3schools](https://www.w3schools.com/cssref/pr_class_display.asp)). That means it will NOT prevent the browser from parsing/loading that markup, but it will prevent from applying styles to it. – Vitiok Nov 24 '17 at 16:07
Do you need it to toggle back on click? – Vitiok Nov 24 '17 at 16:09
Nope, but in the project I'm working on, it will be fading back in when something else is clicked – Precast Dragon Nov 24 '17 at 16:27
1

Well, this is a bit tricky. So in order to accomplish what you want do the following: 1. remove display from will-change as well as from all frames. 2. add a new class .visuallyhidden { display: none; } 3. add: " setTimeout(function() { square.classList.add("visuallyhidden") }, 500) " inside the callback of click – Vitiok Nov 24 '17 at 16:44
1

You can see working example [here](https://codepen.io/vitiok/pen/OOEovJ) And read [this](https://www.impressivewebs.com/animate-display-block-none/) link if you want explanation – Vitiok Nov 24 '17 at 16:46

score 0 · Accepted Answer · answered Nov 24 '17 at 17:59

Seems like the only way to achieve this is with JS, which is what vitilok posted in this comment:

Well, this is a bit tricky. So in order to accomplish what you want do the following: 1. remove display from will-change as well as from all frames. 2. add a new class .visuallyhidden { display: none; } 3. add: " setTimeout(function() { square.classList.add("visuallyhidden") }, 500) " inside the callback of click. You can see working example here And read this link if you want explanation

Basically, he put a setTimeout statement which changed the display property to none after the animation time.

Their CSS

.visuallyhidden {
  display: none;
}

Their JS

setTimeout(function() {
  square.classList.add("visuallyhidden")
}, 500);

score 0 · Answer 4 · answered Aug 25 '22 at 16:14

As others said the display css property not work in css animation, so I have to set the property by js code.

img.classList.add('content-img') // css animation class name
img.onanimationend = () => {
  img.style.display='none' // hide the element after animation
};

`display: none` not working in css animation?

4 Answers4