Css Animation and Display None

CSS Animation and Display None

CSS (or jQuery, for that matter) can't animate between display: none; and display: block;. Worse yet: it can't animate between height: 0 and height: auto. So you need to hard code the height (if you can't hard code the values then you need to use javascript, but this is an entirely different question);

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

You mention that you're using Animate.css, which I'm not familiar with, so this is a vanilla CSS.

You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}

<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>

How can I animate my less from display: block to display: none ?

You cannot animate or transition from display: block; to display: none;, so you will need to remove this if you wish to animate it.

To ensure it fades and is removed you should animate the visibilty and opacity attributes.

Alternatively if you are using jQuery you can use the .fadeOut() function.

MDN - CSS Visibility

jQuery - fadeOut()

`display: none` not working in css animation?

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);

Display none after css animation ended

You could use the height property to achieve this effect:

@keyframes autohide {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  99% {
    height: auto;
    padding: 1rem;
  }
  100% {
    opacity: 0;
    height: 0;
    padding: 0;
  }
}

height is kept auto until near the end of the animation (99%), then set to 0 as it completes.

How do you transition between display:none and display:block?

If you use visibility and opacity in conjunction with max-height, you can achieve a nice transition from visible to hidden or vice-versa. Setting the element's max-height to 0 when it's hidden, and max-height to Xpx (larger than your element will ever be) when visible, prevents the element from messing with your layout in any way (as you mentioned in your question).

Here's a quick example:

var visible = document.querySelector(".visible");
function hide() {  visible.classList.add("hidden");}
visible.addEventListener("click", hide);

div {  background-color: blue;  padding: 40px;  color: white;  cursor: pointer;  transition: all .1s ease;}
.visible {  visibility: visible;  opacity: 1;  max-height: 1000px;}
.hidden {  visibility: hidden;  opacity: 0;  max-height: 0;}

<div class="visible">Click to hide</div>

CSS Opacity transition with display: none

As bizarre as it may seem, the answer is to add a line to your code as follows:

window.setTimeout((function () {
  text.style.display = "flex";
  document.body.offsetHeight;  // Yes, this line!
  text.style.opacity = "1";
}), 2000);

There's nothing special about this line other than that it performs a 'read' of data within your page (any operation that reads data from the DOM would work). What this does is force the browser to layout (or reflow) the page. This is important because, in general, if you carry out a series of 'write' operations - e.g. adding an element or setting it's style, the browser will batch these up and perform them all at once. This means that when you set the element's opacity to 0, and then to 1, the browser batches up these operations and carries them out together before reflowing the page, and thus there is no animation. By inserting a write operation in between, the browser is able to animate from the state of the element where it is transparent to the state where it is fully opaque.

Making it disappear is a little different:

text = document.getElementById("text");

window.setTimeout((function () {
  text.style.display = "flex"; // write operation
  document.body.offsetHeight; // read operation which forces reflow

  text.addEventListener('transitionend', function listener1() {
    text.removeEventListener('transitionend', listener1);
    
    text.addEventListener('transitionend', function listener2() {
      text.removeEventListener('transitionend', listener2);
      text.style.display = 'none'; // remove text
    });
    
    window.setTimeout(function () {
      text.style.opacity = 0.1; // hide text
    }, 1000);
  });
  
  text.style.opacity = 1; // write operation - show text
  
}), 2000);

It's best to wait for the previous transition to complete before starting a new one. It's also good practise to remove the event listeners after the event has fired. You have to wait for the transition to complete before removing the element from the DOM. There is no need to carry out a read operation before setting the style that triggers an animation because the page has already been laid out with the opacity set to 1. I have set opacity to 0.1 so that you can see that the element actually disappears.

You can see a JFiddle here.

How to use display:none on the end of a css-animation

display is not a property that will work with animation. Instead you could change the dimensions (either height or width) to 0 and set overflow:hidden; to the element. In that way, the element should be effectively missing from the page.

.sw_intro{
    display:block;
    overflow:hidden;
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0; width:inherit; height:inherit;}
    100%{margin-top: 100vh; width:0; height:0;}
}

Css Animation and Display None