首次打开页面时如何为 div 的大小调整设置动画 [重复]
Posted
技术标签:
【中文标题】首次打开页面时如何为 div 的大小调整设置动画 [重复]【英文标题】：how do I animate div's resizing when page is first open [duplicate] 【发布时间】：2017-08-06 15:29:17 【问题描述】：所以当页面第一次打开时，它被第一个 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>【问题讨论】：
这样吗？ codepen.io/anon/pen/dvVWXr @MichaelCoker 谢谢 @constantvigilance np，不确定这是否是您想要的。如果我离题了，我不想回答。让我知道您是否希望我将其作为答案提交。 @MichaelCoker 几乎完美，但有没有办法做到这一点，而无需将屏幕尺寸设为 200%？，您看到的移动设备即时编码 【参考方案1】：您可以在 div 元素周围添加一个容器并使用“display: flex;”在它上面，以使项目正确对齐并缩小/增长到基于“%”的宽度/高度。
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>【讨论】：
有点像那样，但我要的是 2 x 2 的东西，而不是连续 4 个。同样在动画完成后它会再次跳回 1 个大红色方块以上是关于首次打开页面时如何为 div 的大小调整设置动画 [重复]的主要内容，如果未能解决你的问题，请参考以下文章