how to animate width and height 100% using css3 animations?

Question

I have following code

HTML

<div></div>

css

div {
    background: tomato;
    width: 100px;
    height: 100px;
    -webkit-animation: animateThis 0.3s ease-in;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes animateThis {
    0% {
        width: 100px;
        height: 100px;
    }
    100% {
        width: 100%;
        height: 100%;

    }
}

DEMO

What i am trying to do is i want to scale up div's with and height to 100% to cover the whole browser. i dont know how to animate 100% height. I did a search on google. No luck found

Is this the only element on the page? Otherwise, you need to show us the full HTML — Paulie_D, Apr 26 '15 at 16:46
@Paulie_D only this div. lets say it is absolutely positioned. — It worked yesterday., Apr 26 '15 at 16:47

score 4 · Accepted Answer · answered Apr 26 '15 at 16:49

You need to specifiy 100% of something..in this case, the html/body

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
div {
  background: tomato;
  width: 100px;
  height: 100px;
  -webkit-animation: animateThis 1s ease-in;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animateThis {
  0% {
    width: 100px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

<div></div>

score 1 · Answer 2 · answered Apr 26 '15 at 16:49

You need to set the html and body tags to be 100% as well to trick the browser.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

div {
  background: tomato;
  width: 100px;
  height: 100px;
  -webkit-animation: animateThis 0.3s ease-in;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes animateThis {
  0% {
    width: 100px;
    height: 100px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

<div></div>

score 1 · Answer 3 · answered Feb 04 '20 at 09:36

.mydiv {
    animation-name: test-animation;
    animation-duration: 1s;
}

@keyframes test-animation {
    from {
        width:0px;
    }

    to {
        width:calc( 100% - 1px );
    }
}

this is a good alternative, animating from 0px to almost 100% by using the calc() function that's gonna return almost the 100% width.

how to animate width and height 100% using css3 animations?

3 Answers3

Linked