0
変換を使用せずにdivをアニメーション化すると、すべて正常に動作します。包含divに変換を追加すると、内部divは包含divの右に置き換えられます。CSS変換はdivの子コンテンツを置き換えます
html,body
{
\t padding: 0px;
\t margin: 0px;
\t width: 1920px;
\t height: 1080px;
}
.container
{
\t width: 1920px;
\t height: 1080px;
\t background-color: rgba(0,0,0,0.3);
\t overflow: hidden;
\t position: relative;
}
.bottom-container
{
\t float: left;
\t background-color: rgba(0,0,0,0.3);
\t width: 1920px;
\t height: 135px;
\t align-content: center;
\t position: relative;
}
.b-holder
{
\t background-color: rgba(255,255,0,.4);
\t justify-content: center;
\t width: 800px;
\t margin-left: auto;
\t margin-right: auto;
\t height: 135px;
\t animation-name: b-holder-a;
\t animation-duration: 10s;
\t position: fixed;
\t left: 560px;
\t top: 945px;
\t padding: 0px;
\t text-align: center;
}
@-webkit-keyframes b-holder-a
{
\t 0%
\t {
\t \t top: 1080px;
\t \t opacity: 0;
\t \t -webkit-transform: rotateX(0deg);
\t }
\t 20%
\t {
\t \t top: 945px;
\t \t opacity: 1;
\t }
\t 80%
\t {
\t \t top: 945px;
\t \t opacity: 1;
\t }
\t 100%
\t {
\t \t top: 1080px;
\t \t opacity: 0;
\t }
}
.b-left
{
\t background-color: rgba(100,0,0,0.6);
\t display: inline-block;
\t margin: none;
\t padding: none;
\t height: 135px;
\t width: 246px;
\t position: fixed;
\t left: 714px;
\t animation-name: b-left-a;
\t animation-duration: 10s;
\t color: #fff;
}
@-webkit-keyframes b-left-a
{
\t 0%
\t {
\t \t left: 745px;
\t }
\t 20%
\t {
\t \t left: 745px;
\t }
\t 40%
\t {
\t \t left: 560px;
\t }
\t 60%
\t {
\t \t left: 560px;
\t }
\t 80%
\t {
\t \t left: 745px;
\t }
\t 100%
\t {
\t \t left: 745px;
\t }
}
.b-center
{
\t background-color: rgba(0,100,0,.2);
\t display: inline-block;
\t width: 308px;
\t margin: none;
\t padding: none;
\t height: 135px;
\t position: fixed;
\t left: 806px;
\t color: #fff;
}
.b-right
{
\t background-color: rgba(0,0,100,0.6);
\t display: inline-block;
\t margin: none;
\t padding: none;
\t float: right;
\t height: 135px;
\t width: 246px;
\t position: fixed;
\t left: 960px;
\t animation-name: b-right-a;
\t animation-duration: 10s;
\t background-position: right;
\t color: #fff;
}
@-webkit-keyframes b-right-a
{
\t 0%
\t {
\t \t left: 926px;
\t }
\t 20%
\t {
\t \t left: 926px;
\t }
\t 40%
\t {
\t \t left: 1114px;
\t }
\t 60%
\t {
\t \t left: 1114px;
\t }
\t 80%
\t {
\t \t left: 926px;
\t }
\t 100%
\t {
\t \t left: 926px;
\t }
}<div class="container">
\t <div class="bottom-container">
\t \t <div class="b-holder">
\t \t \t <div class="b-left">
\t \t \t \t LEFT
\t \t \t </div>
\t \t \t <div class="b-right">
\t \t \t \t RIGHT
\t \t \t </div>
\t \t \t <div class="b-center">
\t \t \t \t CENTER
\t \t \t </div>
\t \t </div>
\t </div>
</div>注：追加されたときに変換これは、特にクロムのために細工されたいくつかの理由