0
Wenn ich divs animieren, ohne Transformation zu verwenden, funktioniert alles wie erwartet. Wenn ich dem umschließenden div eine Transformation hinzufüge, werden die inneren divs nach rechts von dem enthaltenden div verschoben.CSS-Transformation verschiebt div Kind Inhalte
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>Hinweis: Diese speziell für Chrome ist gefertigt Browser