javascript - 我可以从哪个动画中继续选择一个特定的百分比？(can i select a specific percentage from which animation to continue?)

Question

i have a div that has 500vh height and an animation that shows every 100vh of the div every 5 second

(我有一个具有500vh高度的div和一个动画，该动画每5秒显示div的每100vh)

@keyframes slide {
    0%{
        top: 0;
    }
    3.33% {
        top: -100vh;
    }
    19.99%{
        top: -100vh;
    }
    23.32% {
        top: -200vh;
    }
    39.98% {
        top: -200vh;
    }
    43.31% {
        top: -300vh;
    }
    59.97%{
        top: -300vh;
    }
    63.3% {
        top: -400vh;
    }
    79.96%{
        top: -400vh;
    }
    83.29%{
        top: 0vh;
    }
    100% {
        top: 0vh;
    }
}

i have set some radio buttons to navigate between these frames i want to my animation starts from the percentage that i assign it to the radio button, I mean when i click a radio button my animation starts from a specific percentage of animation.

(我已经设置了一些单选按钮在这些帧之间导航，我希望动画从我将其分配给单选按钮的百分比开始，这意味着当我单击单选按钮时，我的动画将从特定百分比的动画开始。)

how do i do this

(我该怎么做呢)

  ask by Mohsen Amani translate from so

Answer 1

You should use transitions instead of an animation.

(您应该使用转场而不是动画。)

 _scrollTo = function (percentage) { document.getElementById('myDiv').style.transform = `translateY(${-percentage}%)` // percentage is negative so it scrolls DOWN instead of UP } 

 body { margin: 0; padding: 0; } div { position: fixed; z-index: -1; overflow: hidden; height: 500vh; width: 100vw; font-size: 100px; border: 10px solid red; box-sizing: border-box; background: linear-gradient(0deg, rgba(18,12,128,1) 0%, rgba(0,212,255,1) 100%); transition: transform 1s ease; } 

 <button onclick="_scrollTo(0)">Scroll to 0%</button> <button onclick="_scrollTo(20)">Scroll to 20%</button> <button onclick="_scrollTo(40)">Scroll to 40%</button> <button onclick="_scrollTo(60)">Scroll to 60%</button> <button onclick="_scrollTo(80)">Scroll to 80%</button> <button onclick="_scrollTo(100)">Scroll to 100%</button> <div id="myDiv"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus est euismod tellus cursus, id pharetra est laoreet. Aliquam in neque hendrerit, facilisis ante ut, laoreet lacus. Aenean et massa a risus facilisis bibendum. Donec viverra varius libero, non varius massa luctus quis. Pellentesque quis faucibus neque. Etiam dui ipsum, malesuada id ante in, ornare placerat mauris. Fusce porta ex eu turpis ornare, ac ultrices purus dapibus. Nullam sem turpis, dictum sit amet nibh ut, scelerisque congue est. Nunc porta lorem arcu, viverra dapibus eros dapibus sit amet. Quisque id gravida sapien, quis feugiat massa. Fusce quis pharetra magna, quis vehicula tellus. Maecenas dictum tellus eu ultrices congue. Aenean vel mi sed sapien scelerisque fringilla. Aliquam sit amet suscipit ex. Vivamus vel ligula sollicitudin, rhoncus justo eu, pellentesque erat. Vestibulum commodo nunc risus, gravida dictum purus molestie non. Donec semper neque nulla, ullamcorper hendrerit ipsum auctor sed. Donec in nisl tincidunt, porttitor augue sed, condimentum nisi. Vestibulum euismod feugiat gravida. Maecenas hendrerit, erat vel consectetur scelerisque, felis odio venenatis velit, in ultricies erat augue non erat. Aliquam erat volutpat. Pellentesque eget ante quam. Proin eleifend vulputate finibus. Cras ut mauris a ante pretium tristique. Praesent ipsum nunc, rhoncus in sem sed, mattis lacinia sem. Fusce congue magna volutpat, fringilla lectus quis, tempus ex. Pellentesque at volutpat orci, et efficitur nulla. Integer eget mi quis lectus pellentesque faucibus. Maecenas odio ante, laoreet ac laoreet dapibus, congue in massa. Quisque suscipit libero est, nec condimentum sem tincidunt non. Nunc consequat, sapien ac efficitur euismod, augue ex efficitur lectus, ac volutpat risus quam at mauris. Praesent id euismod libero. Donec at orci metus. Suspendisse eget orci nisi. Pellentesque sed est imperdiet, efficitur arcu varius, tempor leo. Ut sed diam libero. Vivamus condimentum varius risus, et aliquam velit varius eu. Nunc efficitur urna ipsum. Vivamus nec tortor ac ante venenatis lacinia. Ut eu faucibus risus. Suspendisse tempus consectetur ipsum, vel faucibus tellus gravida ut. Vivamus mollis purus quis libero accumsan, in volutpat lectus tempus. Proin id dui a massa fermentum varius sit amet eleifend libero. Duis fringilla vitae augue a auctor. Mauris non urna in mi fermentum convallis non non quam. Etiam quis libero neque. Vestibulum eget scelerisque dui. Nunc semper, augue eu lacinia euismod, eros leo consequat purus, quis dignissim neque leo at ante. Nullam varius vel ligula nec feugiat. Morbi vitae rhoncus augue. Donec semper purus vitae lorem finibus, nec tincidunt ex faucibus. Vivamus vestibulum, turpis at dictum vehicula, dui velit porta magna, at auctor felis arcu eu turpis. Nunc odio lorem, feugiat vel feugiat hendrerit, rutrum ut est. </div>