html - 如何使用 css3 动画将宽度和高度设置为 100%？

Question

我有以下代码

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

我想做的是我想将 div 的高度和高度放大到 100% 以覆盖整个浏览器。我不知道如何制作 100% 高度的动画。我在谷歌上搜索了一下。没有找到运气

Answer 1

您需要指定 100% 的内容..在本例中，为 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>