Html 如何使用css3动画100%设置宽度和高度的动画？

我有以下代码

HTML

<div></div>

---

我想做的是，我想把div的大小和高度放大到100%，以覆盖整个浏览器。我不知道如何设置100%高度的动画。我在谷歌上搜索过。没有找到运气

您需要指定100%的内容。在本例中，

html/body

*{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
}
div{
背景：番茄；
宽度：100px；
高度：100px；
-webkit动画：动画这1s轻松；
-webkit动画填充模式：正向；
}
@-webkit关键帧为其设置动画{
0% {
宽度：100px；
高度：100px；
}
100% {
宽度：100%；
身高：100%；
}
}

---

您需要将

html

和

body

标记设置为

100%

，并欺骗浏览器

*{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
}
div{
背景：番茄；
宽度：100px；
高度：100px；
-webkit动画：动画这0.3秒容易；
-webkit动画填充模式：正向；
}
@-webkit关键帧为其设置动画{
0% {
宽度：100px；
高度：100px；
}
100% {
宽度：100%；
身高：100%；
}
}

---

这是一个很好的选择，通过使用calc（）函数从0px设置动画到几乎100%，该函数将返回几乎100%的宽度。

这是页面上唯一的元素吗？否则，您需要向我们展示全部内容HTML@Paulie_D只有这个部门。让我们说它是绝对定位的。

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

    }
}

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

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

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