當頁面第一次打開時，如何動畫div的大小調整

因此，當頁面第一次打開時，它完全被第一個div佔據，然後我希望它自動縮小爲四個不同顏色的div。我一直在試圖破解這一段時間，這是我到目前爲止的代碼：當頁面第一次打開時，如何動畫div的大小調整

div { 
 
    float: left; 
 
} 
 

 
#div1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #f24c43; 
 
    animation-name: shrink; 
 
    animation-duration: 4s; 
 
} 
 

 
#div2 { 
 
    width: 0%; 
 
    height: 0%; 
 
    background: #ffe605; 
 
    animation-name: grow; 
 
    animation-duration: 4s; 
 
} 
 

 
#div3 { 
 
    width: 0%; 
 
    height: 0%; 
 
    background: #e89b30; 
 
    animation-name: grow; 
 
    animation-duration: 4s; 
 
} 
 

 
#div4 { 
 
    width: 0%; 
 
    height: 0%; 
 
    background: #870e40; 
 
    animation-name: grow; 
 
    animation-duration: 4s; 
 
}

<div id="div1"> 
 
</div> 
 
<div id="div2"> 
 
</div> 
 
<div id="div3"> 
 
</div> 
 
<div id="div4"> 
 
</div>

來源

2017-03-15 constant vigilance

這樣嗎？ http://codepen.io/anon/pen/dvVWXr –

@MichaelCoker謝謝 –

@constantvigilance np，不知道這是你要不要的。如果我遠離標準，他不想回答。讓我知道你是否希望我提交這個答案。 –

您可以添加一個容器周圍的div元素，並使用「display：彎曲;」爲了讓物品正確對齊並收縮/增長到基於寬度/高度的「％」。

html, 
 
body { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 

 
/*animations*/ 
 

 
@keyframes shrink { 
 
    from { 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
    to { 
 
    width: 50%; 
 
    height: 50%; 
 
    } 
 
} 
 

 
@keyframes grow { 
 
    from { 
 
    width: 0%; 
 
    height: 0%; 
 
    } 
 
    to { 
 
    width: 50%; 
 
    height: 50%; 
 
    } 
 
} 
 

 

 
/*css*/ 
 

 
#flex { 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#div1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #f24c43; 
 
    animation-name: shrink; 
 
    animation-duration: 4s; 
 
} 
 

 
#div2 { 
 
    width: 0%; 
 
    height: 0%; 
 
    background: #ffe605; 
 
    animation-name: grow; 
 
    animation-duration: 4s; 
 
} 
 

 
#div3 { 
 
    width: 0%; 
 
    height: 0%; 
 
    background: #e89b30; 
 
    animation-name: grow; 
 
    animation-duration: 4s; 
 
} 
 

 
#div4 { 
 
    width: 0%; 
 
    height: 0%; 
 
    background: #870e40; 
 
    animation-name: grow; 
 
    animation-duration: 4s; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="../css/home.css"> 
 
    <title>GymBro2</title> 
 
</head> 
 
<body> 
 
    <div id="flex"> 
 
    <div id="div1"> 
 
    </div> 
 
    <div id="div2"> 
 
    </div> 
 
    <div id="div3"> 
 
    </div> 
 
    <div id="div4"> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-03-15 18:20:23

有點像那樣，但我想要一個2×2的東西，而不是4連續。在動畫完成之後，它又跳回到1個大紅色方塊 –

當頁面第一次打開時，如何動畫div的大小調整

回答

相關問題