Make HTML element disappear with CSS animation

Question

I want to know if there is a way to make an HTML element disappear with an animation of CSS. So when the element gets removed from the page by some script, an animation shall display before the element actually gets removed.

Is this possible in an easy way? Or do I need to set a timer to my script that starts the animation with a duration of X and removes the element after time X?

this could help http://stackoverflow.com/questions/15907079/css3-transition-fade-out-effect — Jakob, Sep 15 '16 at 14:30
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Sep 15 '16 at 14:35
This will entirely depend on what effect you are going for and how the removal of the element is supposed to affect other elements after removal. — Paulie_D, Sep 15 '16 at 14:44
I added an answer that works perfectly, it disappears with fade and display property is set to none — QApps, Sep 15 '16 at 14:48
@Froxx I figured out that I had a mistake, see again if this does what you want — QApps, Sep 15 '16 at 15:46

score 23 · Answer 1 · edited Feb 16 '19 at 16:32

23

I would get fancy with keyframes

@keyframes myAnimation{
  0%{
    opacity: 1;
    transform: rotateX(90deg);
  }
  50%{
    opacity: 0.5;
    transform: rotateX(0deg);
  }
  100%{
    display: none;
    opacity: 0;
    transform: rotateX(90deg);
  }
}

#myelement{
    animation-name: myAnimation;
    animation-duration: 2000ms;
    animation-fill-mode: forwards;
}

edited Feb 16 '19 at 16:32

Rich Steinmetz

1,020
13
28

answered Sep 15 '16 at 14:41

Running Buffalo

1,243
2
9
17

3

Display: none at the end of the animation doesn't work (these days?!), I am trying this now in Chrome without "luck". – Youp Bernoulli May 15 '20 at 10:20
See related question: https://stackoverflow.com/questions/46575220/css-animation-fill-mode-not-working-for-displaynone – yissachar shechter Aug 16 '21 at 12:54

score 11 · Accepted Answer · answered Sep 15 '16 at 14:30

11

If the script is actually removing the DOM element, I don't believe there's a way to fade it out. I think the timer is your only option.

answered Sep 15 '16 at 14:30

sean

1,220
9
8

1

It looks like you're right. Well, the way with the timeout isn't that bad anyway. I just wondered if there's an easier way without JS. – Froxx Sep 15 '16 at 16:23

score 6 · Answer 3 · answered Sep 15 '16 at 15:32

I use jQuery to implement this.

//jQuery
$(document).ready(function() {
  var target = $("#div");
  $("#btn").click(function() {
    removeElement(target);
  });
});

function removeElement(target) {
  target.animate({
    opacity: "-=1"
  }, 1000, function() {
    target.remove();
  });
}

div {
  width: 100px;
  height: 100px;
  background-color: #000;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
  <div id="div"></div>
  <input type="button" value="fadeout" id="btn">
</body>

</html>

QApps · Answer 4 · 2016-09-15T15:45:07.177

5

Use transitions like this:

function waithide()
{
  var obj = document.getElementById("thisone");
  obj.style.opacity = '0';
  window.setTimeout(
    function removethis()
    {
      obj.style.display='none';
    }, 300);
}

div
{
  height:100px;
  width :100px;
  background:red;
  display:block;
  opacity:1;
  transition : all .3s;
  -wekit-transition : all .3s;
  -moz-transition : all .3s;
}

<div id="thisone" onclick="waithide()"></div>

edited Sep 15 '16 at 15:45

answered Sep 15 '16 at 14:31

QApps

303
1
8

Well, the animation works indeed, but that's not what I asked for. I asked whether it's possible to play a CSS animation when I remove an element - not how to hide an element (that's still there in the end). – Froxx Sep 15 '16 at 15:18
I know that it works... ^^ But the element is still in the DOM at the end. That's my problem. I want to remove the element from the DOM (not simply hide it with `display: none`), and I wanted to know if there's a solution without JS's `setTimeout()`. But I think I will just go the timeout way. – Froxx Sep 15 '16 at 15:49
I didn't get what you want, do you want to remove the source code of the object like users won't see it in inspect the element? or just it doesn't affect in anyway the code? – QApps Sep 15 '16 at 15:52
I have a script that displays every single record in a data table as an element. This table gets modified during runtime, so the DOM (the HTML source code) gets modified during runtime, too. When I add a new element for a new record of the data table, it's no problem because the normal `animation` property of CSS gets triggered. But when the element gets removed it's a bit harder, because it seems that there's no integrated listener for that. And my question is if there is one I don't know about. But it doesn't seem to be like this so I need to set a timeout that delays the element's deletion. – Froxx Sep 15 '16 at 16:21
Oh ok I get it now – QApps Sep 15 '16 at 16:24

score 3 · Answer 5 · edited Aug 10 '19 at 15:16

I think you would have to do it in two steps. first the animate. Then, after animate is done, remove the elem. See the function below. Perhaps it could be put in a jquery plugin?

<style>
    #test{
        background: red;
        height: 100px;
        width: 400px;
        transition: height 1s;   
    }

    #test.hide {
        height: 0;       
    }

</style>

<div id="test"> </div>

<button>Hide the Div</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>


        $('button').click(function(){
            removeWithAnimate('#test');
        });


        function removeWithAnimate(id){
            $(id).addClass('hide');
            setTimeout( function(){
                    $(id).remove()
            },1000);;   
        }

</script>

$('button').click(function() {
  removeWithAnimate('#test');
});

function removeWithAnimate(id) {
  $(id).addClass('hide');
  setTimeout(function() {
    $(id).remove()
  }, 1000);;
}

#test {
  background: red;
  height: 100px;
  width: 400px;
  transition: height 1s;
}

#test.hide {
  height: 0;
}

<div id="test"> </div>

<button>Hide the Div</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

That would be a nice solution, if the element could stay in the DOM, but it doesn't. I need to remove it, but thanks. — Froxx, Sep 15 '16 at 14:38
@Froxx: "if the element could stay in the DOM, but it doesn't" true..."I need to remove it" yes this is what happens after 1 second (when the animation on height is finished). This will do what you prefer, but it involves a timer being set. The solution by Buffalo is without a (javascript at least) timer but does not finally remove the element, it resides in the DOM but isn't displayed anymore. — Youp Bernoulli, May 15 '20 at 10:17

score -1 · Answer 6 · answered Feb 06 '22 at 16:19

-1

transition: .5s;

invisible:

opacity: 0;

visible:

opacity: 1;

transition will make it appear and disappear smoothly.

answered Feb 06 '22 at 16:19

fruitloaf

1,628
15
10

Make HTML element disappear with CSS animation

6 Answers6

Linked