如何使用 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%;

    }
}

演示

我想要做的是我想將 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>

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>

Answer 3

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

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

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

這是一個很好的選擇，通過使用 calc() 函數從 0px 動畫到幾乎 100%，該函數將返回幾乎 100% 的寬度。