html - 移动设备上的关键帧展开页面

Question

基本上我的标题可以通过滚动更改为其他标题。

因此，第一个标题从左侧(屏幕外)到页面中心，几秒钟后它转到右侧(屏幕外)，然后第二个标题从左侧出现，依此类推。

它在桌面版本 ( http://two-house.com ) 上正常工作，但在移动设备上，它使页面在从屏幕中心向右移动的动画后展开。

它的 HTML 是:

<div class="slider__heading-container">
    <div class="item-1">
        <h2 class="heading-primary">
            <span class="heading-primary--left">
                Find your
            </span>
            <span class="heading-primary--right">
                perfect place
            </span>
        </h2>
    </div>
    <div class="item-2">
        <h2 class="heading-primary">
            <span class="heading-primary--left">
                We will
            </span>
            <span class="heading-primary--right">
                suits your needs
            </span>
        </h2>
    </div>
    <div class="item-3">
        <h2 class="heading-primary">
            <span class="heading-primary--left">
                Invest and
            </span>
            <span class="heading-primary--right">
                earn money
            </span>
        </h2>
    </div>
</div>

和CSS

.slider__heading-container {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 80%;
    transform: translate(0, -50%);
    height: 5rem;
    display: flex;
    justify-content: center;
    text-align: center;
}

.item-1,
.item-2,
.item-3 {
    position: absolute;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.item-1 {
    animation-name: anim-1;
}
.item-2 {
    animation-name: anim-2;
}
.item-3 {
    animation-name: anim-3;
}

@keyframes anim-1 {
    0%, 8.3% {
        transform: translateX(-100%);
        opacity: 0;
        display: none;
    }
    8.3%,25% {
        transform: translateX(0);
        opacity: 1;
        display: block;
    }
    33.33%, 100% {
        transform: translateX(100%);
        opacity: 0;
        display: none;
    }
}

@keyframes anim-2 {
    0%, 33.33% {
        transform: translateX( -100%);
        opacity: 0;
        display: none;
    }
    41.63%, 58.29% {
        transform: translateX(0);
        opacity: 1;
        display: block;
    }
    66.66%, 100% {
        transform: translateX(100%);
        opacity: 0;
        display: none;
    }
}

@keyframes anim-3 {
    0%, 66.66% {
        transform: translateX(-100%);
        opacity: 0;
        display: none;
    }
    74.96%, 91.62% {
        transform: translateX(0);
        opacity: 1;
        display: block;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
        display: none;
    }
}

Answer 1

试试这个:

.slider:first-of-type {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}