4

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

2
  • Is this the only element on the page? Otherwise, you need to show us the full HTML
    – Paulie_D
    Apr 26, 2015 at 16:46
  • @Paulie_D only this div. lets say it is absolutely positioned. Apr 26, 2015 at 16:47

3 Answers 3

4

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>

1

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>

1
.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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.