CSS Animation Keyframes with Display None Works to Fade In, But Not Fade Out

CSS animation keyframes with display none works to fade in, but not fade out

Trying to animate the display:none is the root of your problem. The confusion for why the fade-in works and the fade-out doesn't comes from the combination of using both display and opacity.

The display property is only being dictated by whether .active is applied; the animations aren't actually changing it, whereas the opacity is animated as expected. On the fade-in, this means that you immediately show your element, which then transitions from transparent to opaque. On the fade-out, this means that you immediately hide your element, which then transitions from opaque to transparent while hidden.

There are a couple different ways you could solve this, but it sort of depends on the context. For example, you could leave it as a block element and use the height property to make it collapse:

$('button').on('click', function(e) {  e.preventDefault();  $(this).siblings('.box').toggleClass('active');})

@import "bourbon"; * {  box-sizing: border-box;  text-align: center;}button {  margin: 30px 0;  border: 1px solid #ccc;  text-align: center;  padding: 1em;  background: none;  box-shadow: none;}.box {  margin: 0 auto;  width: 80%;  height: 0;  display: block;  line-height: 100px;  background: #ccc;  border: 1px solid #444;  text-align: center;  opacity: 0;  animation: FadeOut 1s ease-in-out;}.box.active {  display: block;  height: initial;  opacity: 1;  animation: FadeIn 1s ease-in-out;}@keyframes FadeIn {  0% {    opacity: 0;    height: initial;  }  100% {    opacity: 1;    height: initial;  }}@keyframes FadeOut {  0% {    opacity: 1;    height: initial;  }  99% {    opacity: 0;    height: initial;  }  100% {    height: 0;    opacity: 0;    height: 0;  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="col">  <button class="toggle-good">Toggle display</button>  <p class="box good">I move nicely!</p>  <p>Extra paragraph to show collapse</p></div>

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>

Display none in CSS fade out does not work or hide the div

To add to @Highdef answer,.

If you don't mind adding a bit of Javascript, you can listen for the animation end event, and set display none manually.

const e = document.getElementById("a");e.addEventListener("animationend", (ev) => {  if (ev.type === "animationend") {    e.style.display = "none";  }}, false);

#a {  width: 200px;  height: 200px;  background: red;  -webkit-animation: fadeinout 4s linear forwards;  animation: fadeinout 4s linear forwards;  opacity: 0;}
@keyframes fadeinout {  50% {    opacity: 1;  }  100% {    opacity: 0;  }}

<div style="border:1px solid black;width:200px;">  <div id="a">  </div></div>

CSS display none and opacity animation with keyframes not working

If you are using @keyframes you should use -webkit-animation instead of -webkit-transition. Here is the doc for @keyframes animation: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations.

See code snippet below:

.parent {  background-color: #000;  color: #fff;  width: 500px;  height: 500px;  padding: 5px;}.myDiv {  display: none;  opacity: 0;  padding: 5px;  color: #600;  background-color: #cec;}.parent:hover .myDiv {  display: block;  opacity: 1;  /* "both" tells the browser to use the above opacity  at the end of the animation (best practice) */  -webkit-animation: display-none-transition 1s both;  animation: display-none-transition 1s both;}@-webkit-keyframes display-none-transition {  0% {    opacity: 0;  }}@keyframes display-none-transition {  0% {    opacity: 0;  }}

<div class="parent">  Hover on me...  <div class="myDiv">Hello!</div></div>

How to fade out a div slide using CSS animations?

For animation I use the library called Animate.css. Take a look at the following link:

https://animate.style/

You can install this library with NPM:

npm install animate.css --save

Then you can use this library like this:

<div class="page animate__fadeOutLeft" style="background-color: green;">

CSS cannot fade out and then hide

Add animation-fill-mode: forwards; so that the element you're animating stays on the last (key)frame, and it doesn't start over or refresh to the beginning.

Learn more about animation-fill-mode.

Another way to write this animation:

.hide {
  animation: fadeOut 1s forwards;
}

.hide {    animation-name:fadeOut;    animation-duration:1s;    animation-fill-mode: forwards; /* added */    /*visibility: hidden;    display: none;*/}
@keyframes fadeOut {    from {        opacity: 1;        margin-left: 0%;    }
    to {        opacity: 0;        margin-left: -100%;        height: 0; /* added */    }}

<div class="hide">  <div style="padding:20px;background:orange;">    <div style="padding:5px;background:azure;">      My content    </div>  </div></div>
   <div> Other content   </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()

---

Related Topics