CSS: How to get height of element to stay at final animated height?

Question

When I animate some properties like height below, once the animation is finished it snaps back to either a different height or no height. I have tried setting height: auto so that I can stay at 100% but that didn't seem to do anything. Not sure what I am missing so that the attribute's value is retained at the end of the animation.

.parent {
    animation: expand 3s 1;
}

@keyframes expand {

   from {
     width: 0%;
     height: 0%;
   }

    to {
      width: 50%;
      height: 100%;

    }

  }

<div class="parent" style="background-color: red;">


 </div>

score 0 · Accepted Answer · answered Jan 23 '19 at 06:32

0

Use animation-fill-mode: forwards. This will make the final values of the animation stay after the animation has ended.

In your case, just append forwards to the animation shorthand.

answered Jan 23 '19 at 06:32

Kalabasa

506
5
14

ah didn't know that property existed, thanks! – Raymon Opie Jan 23 '19 at 06:59

score 0 · Answer 2 · answered Jan 23 '19 at 06:36

Did you try to like this

function AnimationListener(e) {     
    var clientHeight = e.target.clientHeight;
    var clientwidth= e.target.clientWidth;
  //  alert('height - '+clientHeight+'  width - '+clientwidth);
    console.log('height - '+clientHeight+'  width - '+clientwidth);
}

var anim = document.getElementById("parent");
anim.addEventListener("animationend", AnimationListener, false);

<head>
  <style>
   html{
      height: 100%;
    }
    body{
      height: 100%;
    }
    .parent {
        animation: expand 3s 1 forwards;
    }

    @keyframes expand {

       from {
         width: 0%;
         height: 0%;
       }

        to {
          width: 50%;
          height: 100%;

        }

      }
    </style>
 </head>

<div class="parent" id="parent"  style="background-color: red;">
 
 </div>

CSS: How to get height of element to stay at final animated height?

2 Answers2