如何使用CSS3动画使宽度和高度达到100%？

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%;

    }
}

我要做的是将div的宽度和高度扩展到100%，以覆盖整个浏览器。我不知道如何动画显示100%的高度。我在谷歌上搜索过，但没有找到合适的结果。

演示

- It worked yesterday.

---

这是页面上唯一的元素吗？否则，您需要向我们展示完整的HTML。 - Paulie_D

@Paulie_D 只有这个 div。假设它是绝对定位的。 - It worked yesterday.

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>

- Paulie_D

Answer 2

你需要将 html 和 body 标签设置为 100%，以便欺骗浏览器。

* {
  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>

- Stewartside

Answer 3

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

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

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

这是一个很好的替代方案，使用 calc() 函数将从0像素动画到几乎100%，该函数将返回几乎100%的宽度。

- Mo Meski