项目水平堆叠，它们垂直没有

Question

如果我在横向和肖像之间进行切换，那么使用肖像我会得到像它一样的行。在风景中，我确实得到了列，但它们都在彼此之上。那是为什么？

HTML：

<div class="itemContainer">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
    <div class="item5"></div>
</div>

的CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

.itemContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div {
    position: absolute;
}




.item1 {
    background: rgb(255, 0, 0);
    animation: animateIn 1s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

.item2 {
    background: rgb(0, 255, 0);
    animation: animateIn 1.2s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

.item3 {
    background: rgb(0, 0, 255);
    animation: animateIn 1.4s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

.item4 {
    background: rgb(255, 255, 0);
    animation: animateIn 1.6s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

.item5 {
    background: rgb(255, 0,255);
    animation: animateIn 1.8s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

@keyframes animateIn {
    0% {
        left: 100%;
    }
    100% {
        left: 0;
    }
}



@media only screen and (orientation : landscape) { 

    div {
        width: 20%;  
        height: 100%;      
     }

    .item1 {left: 0%}
    .item2 {left: 20%}
    .item3 {left: 40%}
    .item4 {left: 60%}
    .item5 {left: 80%}


}


@media only screen and (orientation : portrait) { 

    div {
        width: 100%;  
        height: 20%;
     }

    .item1 {top: 0%}
    .item2 {top: 20%}
    .item3 {top: 40%}
    .item4 {top: 60%}
    .item5 {top: 80%}

}

的jsfiddle： https://jsfiddle.net/clankill3r/yzc8mty8/5/

更新：屏幕：

肖像好：

景观不好：

Answer 1

这是因为你的动画只是删除它。

animation: 1.8s cubic-bezier(0.535, 0.185, 0.89, 0.435) 0.4s alternate both 1 running animateIn;

或改变动画。

它会很好地检查Fiddle.