Display None For CSS Animation

Question

I'm trying to make an accessibility friendly website and getting hard time with implementing animation or transition with display:none property. I must use the display:none in order to it be an accessible, however it doesn't animate with the display:none. I remember this worked with keyframes animation, but seems like it doesn't today. Any solution, please?

I MUST USE THE display:none

There's no answer to my question. I must use the `display:none` — ekaterini9, Nov 12 '16 at 21:12
Animated display none IS NOT POSSIBLE you have to use opacity or something else cit from the duplicate: "CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. " — paolobasso, Nov 12 '16 at 21:14
@ekaterini9 You can't. The `display` property is not animatable. — TylerH, Nov 12 '16 at 21:14
But wasn't it possible once with the `keyframes`? I'm pretty sure it was. Perhaps there's another way of doing this. :( — ekaterini9, Nov 12 '16 at 21:18
@ekaterini9 No. You can simulate it with `opacity`, which is a spectrum of values, but `display` values are all mutually exclusive, unrelated values. The browser doesn't know how to transition between `display: block` and `display: none` as there are no in-between values. — TylerH, Nov 12 '16 at 21:19
Yes, I know about the `opacity` and `height` and other workarounds to make it almost the same, but I must use the `display:none` for accessibility. oh... hard to believe there's no way to make this — ekaterini9, Nov 12 '16 at 21:21
@ekaterini9 just use opacity for the animation and then on the very last step from 99% to 100% set `display: none`. — TylerH, Nov 12 '16 at 21:23
TylerH... you mean with the keyframes, right? But I tried it, and it didn't worked. Are you sure it can work with the `keyframes`? — ekaterini9, Nov 12 '16 at 21:28
@ekaterini9 yes https://jsfiddle.net/kz60gc7f/ it's the closest you'll get. — TylerH, Nov 12 '16 at 21:36
TylerH, it's because you don't apply the `display:none` to the element at the end. You apply it only as for the animation part. It's useless... set the display:none for the element and then try to animate with `display:block` from `0%`... you won't get it. At least I can't with FF, Chome and IE — ekaterini9, Nov 12 '16 at 21:53
BTW: jQuery won't be useful here as well(correct me if I'm wrong), because it uses the same CSS and all the rules of css apply to it as well — ekaterini9, Nov 12 '16 at 21:59
@K.Daniek Like I said, that's as close as you're going to get. — TylerH, Nov 13 '16 at 17:37

score 0 · Accepted Answer · answered Nov 12 '16 at 21:45

0

Tried to do it by myself with keyframes, but received an unexpected result. Anyone can tell me why the div appears on the screen even if there's display: none property in the keyframe?

.x {
  height: 100px;
  width: 100px;
  background-color: black;
  animation: cx 3s forwards;
}
@keyframes cx {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    display: none;
  }
}

<div class='x'>

</div>

answered Nov 12 '16 at 21:45

kind user

40,029
7
67
77

I can :) Because you set it on the `keyframes`. You must set the `display:none` for the `.x` class as well – ekaterini9 Nov 12 '16 at 21:50
@ekaterini9 Then the animation won't work at all. – kind user Nov 12 '16 at 21:53
Exactly. That's the problem. Otherwise it's useless... because you don't actually set `display:none` to the element. What the use of this? none. – ekaterini9 Nov 12 '16 at 21:54
@ekaterini9 It would be fine if the keyframe would apply the `display: none` property to the element properly. I think that you should do it in JS or at least jQuery. I can do that for you if you want, with `display: none` property. – kind user Nov 12 '16 at 21:57
But JS uses the CSS for this... so it won't work. I will be very thankful to you if you could show me how I can make this with JS – ekaterini9 Nov 12 '16 at 22:00
@ekaterini9 You want pure JS or jQuery? – kind user Nov 12 '16 at 22:01
Pure JS will be good, but if you can't with pure JS, then jQuery – ekaterini9 Nov 12 '16 at 22:02
@ekaterini9 https://jsfiddle.net/syLe2oat/ – kind user Nov 12 '16 at 22:17
Thanks Daniek! However it won't work on the backwards... It's only can be done one way. I need this as part of the accessibility where ther's a loop from - to, and backwards. But I guess this is the best it can gets. Thanks a lot! – ekaterini9 Nov 12 '16 at 22:25
@ekaterini9 What do you mean by 'backwards'? That the div will disappear and appear infinite? – kind user Nov 12 '16 at 22:27
Yes. But with the `display:none` between it. It's hard to understand, but you can say that this box(in your example) will animate back(after being a display:none) and become `display:none` again, and then the animation will continue from the start(as a loop). I tried the same way with JS adding a classes and removing them(with re-checking logic, of course), but it didn't work well. Perhaps I did some mistake back there, I will check it tomorrow, but I'm almost sure I did it correctly. – ekaterini9 Nov 12 '16 at 22:34
@ekaterini9 I wish I could help you... – kind user Nov 12 '16 at 22:39

Display None For CSS Animation

1 Answers1