当我在不使用变换的情况下为 div 设置动画时,一切都按预期进行。当我向包含的 div 添加转换时,内部 div 被移到包含的 div 的右侧。
html,body
{
padding: 0px;
margin: 0px;
width: 1920px;
height: 1080px;
}
.container
{
width: 1920px;
height: 1080px;
background-color: rgba(0,0,0,0.3);
overflow: hidden;
position: relative;
}
.bottom-container
{
float: left;
background-color: rgba(0,0,0,0.3);
width: 1920px;
height: 135px;
align-content: center;
position: relative;
}
.b-holder
{
background-color: rgba(255,255,0,.4);
justify-content: center;
width: 800px;
margin-left: auto;
margin-right: auto;
height: 135px;
animation-name: b-holder-a;
animation-duration: 10s;
position: fixed;
left: 560px;
top: 945px;
padding: 0px;
text-align: center;
}
@-webkit-keyframes b-holder-a
{
0%
{
top: 1080px;
opacity: 0;
-webkit-transform: rotateX(0deg);
}
20%
{
top: 945px;
opacity: 1;
}
80%
{
top: 945px;
opacity: 1;
}
100%
{
top: 1080px;
opacity: 0;
}
}
.b-left
{
background-color: rgba(100,0,0,0.6);
display: inline-block;
margin: none;
padding: none;
height: 135px;
width: 246px;
position: fixed;
left: 714px;
animation-name: b-left-a;
animation-duration: 10s;
color: #fff;
}
@-webkit-keyframes b-left-a
{
0%
{
left: 745px;
}
20%
{
left: 745px;
}
40%
{
left: 560px;
}
60%
{
left: 560px;
}
80%
{
left: 745px;
}
100%
{
left: 745px;
}
}
.b-center
{
background-color: rgba(0,100,0,.2);
display: inline-block;
width: 308px;
margin: none;
padding: none;
height: 135px;
position: fixed;
left: 806px;
color: #fff;
}
.b-right
{
background-color: rgba(0,0,100,0.6);
display: inline-block;
margin: none;
padding: none;
float: right;
height: 135px;
width: 246px;
position: fixed;
left: 960px;
animation-name: b-right-a;
animation-duration: 10s;
background-position: right;
color: #fff;
}
@-webkit-keyframes b-right-a
{
0%
{
left: 926px;
}
20%
{
left: 926px;
}
40%
{
left: 1114px;
}
60%
{
left: 1114px;
}
80%
{
left: 926px;
}
100%
{
left: 926px;
}
}
<div class="container">
<div class="bottom-container">
<div class="b-holder">
<div class="b-left">
LEFT
</div>
<div class="b-right">
RIGHT
</div>
<div class="b-center">
CENTER
</div>
</div>
</div>
</div>
注意:这是专门为 Chrome 浏览器设计的
最佳答案
由于某种原因,添加转换时,div 的内容使用绝对定位而不是固定定位。我通过更改每个动画的左值解决了这个问题。
关于html - CSS Transform 替换 div 子内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38152518/