html/css/js 动画的动画延迟

Question

我有一个动画，它通过垂直滑动来改变文本（类似于 groupebouchersports.com 主页上的动画）。问题是，我希望文本在滑出之前停止更长的时间（延迟），但我似乎找不到该怎么做。这是我的 html / css / javascript 代码。提前致谢。

document.addEventListener('DOMContentLoaded', initTextAnimSlider);

function initTextAnimSlider() {
    var textAnimHolder = document.querySelector('[data-words]');
    var textAnimItem = document.querySelectorAll('.text-anim-item');
    var textAnimItems = document.querySelector('.text-anim-items');
    var animIn = 'anim-in';
    var animOut = 'anim-out';
    var lineActiveClass = 'line-active';
    var animNextItem = null;
    var animPrevItem = null;
    var animFirstLoad = false;
    var animDuration = textAnimHolder.getAttribute('data-delay');
    var animCounter = 0;
    var setTimeAnim;
    var setTimeAnimResize;

    animFunc();
    getHolderWidth();

    function animFunc() {
        clearTimeout(setTimeAnim);

        setTimeAnim = setTimeout(function () {
            animFirstLoad = true;
            
            if (animPrevItem !== null) {
                animPrevItem.classList.add(animOut);
            }
            animNextItem = textAnimItems.children[animCounter];
            animNextItem.classList.remove(animOut);
            animNextItem.classList.add(animIn);

            

            animPrevItem = animNextItem;

            if (animCounter === textAnimItem.length - 1) {
                animCounter = 0;
            } else {
                animCounter++;
            }
            animFunc();
        }, animFirstLoad ? animDuration : 100);
    }

    function getHolderWidth() {
        var itemsWidth = [];

        for(var i =0; i < textAnimItem.length; i++) {
            itemsWidth.push(textAnimItem[i].clientWidth);
            console.log(textAnimItem[i].clientWidth);
        }


        textAnimHolder.style.width = '450px';
    }

    function resizeHandler() {
        clearTimeout(setTimeAnim);
        clearTimeout(setTimeAnimResize);
        getHolderWidth();

        setTimeAnimResize = setTimeout(function() {
            animFunc();
        }, 50);
    }

    window.addEventListener('resize', resizeHandler);
    window.addEventListener('orientationchange', resizeHandler);
}

.text-anim-item {
    white-space: nowrap;
    position: absolute;
    left: 0;
    right:auto;
    bottom: 0;
    
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
}



.text-anim-item.anim-in {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
    
    -webkit-animation: textAnimIn .6s .3s forwards;
    animation: textAnimIn .6s .3s forwards;
    
    
}

.text-anim-item.anim-out {
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
    
    -webkit-animation: textAnimOut .6s .3s  forwards;
    animation: textAnimOut .6s .3s  forwards;
    
}

@-webkit-keyframes textAnimIn {
    0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
        
    }
    
}

@keyframes textAnimIn {
    0% {
        -webkit-transform: translate3d(0, -120%, 0);
        transform: translate3d(0, -120%, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }
}

@-webkit-keyframes textAnimOut {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }

    

    100% {
        -webkit-transform: translate3d(0, 120%, 0);
        transform: translate3d(0, 120%, 0);
    }
}

@keyframes textAnimOut {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0);
    }

    

    100% {
        -webkit-transform: translate3d(0, 120%, 0);
        transform: translate3d(0, 120%, 0);
    }
}

@-webkit-keyframes textAnimInCenter {
    0% {
        -webkit-transform: translate3d(-50%, -120%, 0);
        transform: translate3d(-50%, -120%, 0);
    }

    100% {
        -webkit-transform: translate3d(-50%, 10%, 0);
        transform: translate3d(-50%, 10%, 0);
    }
}

@keyframes textAnimInCenter {
    0% {
        -webkit-transform: translate3d(-50%, -120%, 0);
        transform: translate3d(-50%, -120%, 0);
    }

    100% {
        -webkit-transform: translate3d(-50%, 10%, 0);
        transform: translate3d(-50%, 10%, 0);
    }
}

@-webkit-keyframes textAnimOutCenter {
    0% {
        -webkit-transform: translate3d(-50%, 0%, 0);
        transform: translate3d(-50%, 0%, 0);
    }

    

    100% {
        -webkit-transform: translate3d(-50%, 120%, 0);
        transform: translate3d(-50%, 120%, 0);
    }
}

@keyframes textAnimOutCenter {
    0% {
        -webkit-transform: translate3d(-50%, 0%, 0);
        transform: translate3d(-50%, 0%, 0);
    }

    

    100% {
        -webkit-transform: translate3d(-50%, 120%, 0);
        transform: translate3d(-50%, 120%, 0);
    }
}

<section class="bg-img intro-module">

                <div class="block-center">
                <div class="block-caption py-4 text-center text-md-left">
                        <h1 style="text-align:left;" class="display-1 mb-0">
                            <u class="mb-0" data-delay="1200" data-words>
                                &nbsp;
                                <span style="text-align:left;" class="text-anim-items">
                                    <span  class="text-anim-item"><span>text</span></span>
                                    <span  class="text-anim-item"><span>text 2</span></span>
                                    <span  class="text-anim-item"><span>text 3</span></span>
                                </span>
                                <span class="anim-line"></span>
                            </u> 
                            <br>
                            <span>lorem</span>
                            <br>
                            <span>ipsum</span>
                            <br>
                            <br>
                            <span><p>caption text</p></span>
                            </h1>
                    </div>
                </div>
</section>

Answer 1

添加一个片段来解释我在评论中所指的内容。块 ID 只是为了让文本隐藏在后面，因为我认为你的意图是让它们滚出屏幕。

span {
    position: absolute;
    left: 0;
    right:auto;
    top: 0;
    font-size: 15pt;
}
#block {
  position:absolute;
  top: 100px;
  left:0;
  width: 300px;
  height: 300px;
  background: white;
}
#one {
  animation: move 6s linear infinite;
  color: red;
}
#two {
  animation: move 6s linear -2s infinite;
  color: blue;
}
#three {
  animation: move 6s linear -4s infinite;
  color: green;
}

@keyframes move {
  0% {transform: translate(0, 0)}
  33% {transform: translate(0, 0)}
  66% {transform: translate(0, 200px)}
  100% {transform: translate(0, 200px)}
}

<span id="one">Hello World</span>
<span id="two">World Hello</span>
<span id="three">No No No</span>
<div id="block"></div>

html/css/js 动画的动画延迟

Animation delay with html/css/js animation

html

javascript

css

animation

transform