html - 元素水平堆叠在垂直不堆叠的地方

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.