display none breaks animation

visibility: hidden vs display: none accessibility
display:none not working
css display:none not working jquery
display:none alternative
display: none still in dom
display:none still showing
style.display none not working in chrome
visually hidden css

i want a certain div to be shown in certain circumstances, and i want it to be animated, at the start it should be invisible so...

.fixedNav{
    background-color: rgba(28,20,13, 0.75);
    position:fixed;
    color:white;
    width:60vw;
    margin-top:-50px !important;
    z-index: 1;
    display:none;
    opacity:0;
    transition:opacity .3s ease-in;
}

and then i animate the opacity with css by adding this class, with jquery, to it:

.fixedNavActive{
    display: block;
    opacity:1;
}

and it all works fine if i remove the display: none; from the main class, if i leave it there then the opacity isn't animated, it just appears, why does it break it and how can i make it animate the opacity instead of toggling it to 1?

Basically, you cannot animate display properties, and even though you're only trying to animate the opacity, that transition fails because when the transition begins, the element doesn't exist. It has been removed from the flow due to the display: none property.

You can achieve the effect you're looking for by using visibility: hidden and visibility: visible, which is an animatable property, and if you need to effectively remove the element from the flow when it lacks visibility, then you can apply a max-height of 1px to the element and a margin-top of -1px.

Places it's tempting to use `display: none;`, but don't, with how you deal with JavaScript library animations, or avoiding hiding all together. And if you know that you need to display: none something, the class should help slideUp() , you'll have a display: none in the inline CSS to deal with. There’s a technique you can use to animate from display: none, what you need to do is add a class that makes the element display: block first, then add a class that will animate the element, however before adding the animation class you need to force a reflow on that element.

JSFiddle

display properties can not be animated in CSS.

You can just use opacity:0; and then opacity:1.

To get a better effect you could always use visibility:hidden; for your use.

Display none in option breaks animation · Issue #301 · julianshapiro , I'm using version 1.0.0. If I animate opacity everything works great, but as soon as I add display: "none" to the options object it breaks the  You can't animate to or from display: none because that code line takes that element totally out of the flow of content.. It can only be off or on. In other words, the CSS doesn't have any values to create animation "keyframes" from. opacity: 0, height: 0 and pointer-events:none takes you a long way.

I place the 'display:none;' on the content of the element, or wrap what I want to hide in another div. And then set the transition on the surrounding element. To let the animation fade both in and out you will have to set the height, padding or something to keep it from getting a height of 0 the second the content disappears.

Solves it for me at least :)

.hidden { 
    opacity: 1;
    height:20px;
    transition: all 0.5s linear;
}

.container:hover > .hidden{
   opacity: 0;
   height:0;
   transition: all 0.5s linear;
}

.container:hover > .hidden > .hidden-content{
    display: none;
}
<div class="container">
  <div> Hello! </div> 
  <div class="hidden">
      <div class="hidden-content"> Goodbye! </div>
   </div>  
  <div> Some other text! </div>
</div>

showing from display none - GSAP, And the solution "TweenLite.to($('#mydiv') , 0.3, {autoAlpha: 1, display:'block'});" breaks the effect first time, i guess because the "display" property is not animated. We can sum up the problem we want to solve as follows: When the element is visible, first animate the opacity, then, when that’s finished, make it display: none. When the element is invisible, first make it display: block, then (while it’s still visually hidden, but existing on the page), animate the opacity.

Animating from "display: block" to "display: none", A look at why you can't animate from display:block to display:none and how you might solve this problem with a little bit of JavaScript. Note that display:none is not always bad regarding a11y. For example, it can be used with complex menus a la drop-down or fly-out. That’s because using display:none (vs. position:absolute with a negative offset) removes elements from the tabbing flow which helps users navigate through very long menus… and the page.

display, The display CSS property sets whether an element is treated as a block or inline element and the layout used for one or more inline element boxes that do not generate line breaks before or after themselves. Using a display value of none on an element will remove it from the accessibility tree. Animation type, discrete​  As you might already know, CSS3 transitions and animations allow you to animate a specific set of CSS properties. One of the properties that cannot be animated is the display property. It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?).

CSS animation-fill-mode Property, none, Default value. Animation will not apply any styles to the element before or after it is executing. forwards, The element will retain the style values that is set  none: Default value. Specifies that there will be no animation (can be used to override animations coming from the cascade) initial: Sets this property to its default value. Read about initial: inherit: Inherits this property from its parent element. Read about inherit

Comments
  • Perhaps you should hava look at jQuery's fadeIn, and fadeOut. Probably makes it a lot less complicated...
  • that is plan b, however i would like it to be implemented in css, as it seems it's less "laggy"
  • display can't be animated.
  • Is fixedNav a div element?
  • This might help: greywyvern.com/?post=337
  • Visibility is only animatable as far as delay functions. It only has two states on/off, there is no intermediate step.
  • That seems irrelevant to his/her case. He/she needs the visibility property to change instantaneously, and then the opacity animation can begin once the visibility property has changed.
  • Which is my point....you have to stagger the two: greywyvern.com/?post=337
  • Okay, now it makes sense =) thank you, i ended up using visibility and opacity, which works marvellously