控制CSS動畫

Question

有沒有辦法用javascript完全控制CSS動畫？ 我需要通過單擊按鈕來更改動畫的狀態。

@keyframes example {
0% {transform: translate(0,0);}
29% {transform: translate(0,0);}
33% {transform: translate(-100px,0);}
62% {transform: translate(-100px,0);}
66% {transform: translate(-200px,0);}
96% {transform: translate(-200px,0);}
100% {transform: translate(0,0);}}

單擊按鈕時是否有可能將動畫狀態更改為50％？

我想制作一個最小js的滑塊，但需要處理這個小點。

如果沒有辦法做到這一點，你能告訴我如何用不同的方式做到這一點嗎？

 #box { width:100px; height:100px; overflow:hidden; position:relative; } #all { width:300px; height:100px; animation-name: example; animation-duration: 13.5s; animation-iteration-count: infinite; } .box1 { width:100px; height:100px; background-color:red; float:left; } .box2 { width:100px; height:100px; background-color:blue; float:left; } .box3 { width:100px; height:100px; background-color:green; float:left; } @keyframes example { 0% {transform: translate(0,0);} 29% {transform: translate(0,0);} 33% {transform: translate(-100px,0);} 62% {transform: translate(-100px,0);} 66% {transform: translate(-200px,0);} 96% {transform: translate(-200px,0);} 100% {transform: translate(0,0);} } @keyframes example2 { 0% {background-color:black;} 29% {background-color:black;} 33% {background-color:white;} 62% {background-color:white;} 66% {background-color:white;} 96% {background-color:white;} 100% {background-color:black;} } @keyframes example3 { 0% {background-color:white;} 29% {background-color:white;} 33% {background-color:black;} 62% {background-color:black;} 66% {background-color:white;} 96% {background-color:white;} 100% {background-color:white;} } @keyframes example4 { 0% {background-color:white;} 29% {background-color:white;} 33% {background-color:white;} 62% {background-color:white;} 66% {background-color:black;} 96% {background-color:black;} 100% {background-color:white;} } .circle { width:10px; height:10px; background-color:white; border-radius:5px; float:left; margin-left:10px; } .circle1 { animation-name: example2; animation-duration: 13.5s; animation-iteration-count: infinite; } .circle2 { animation-name: example3; animation-duration: 13.5s; animation-iteration-count: infinite; } .circle3 { animation-name: example4; animation-duration: 13.5s; animation-iteration-count: infinite; } #circles { position:absolute; bottom:10px; left:15px; } span { color:white; margin-top:20px; display:block; text-align:center; } 

 <div id="box"> <div id="all"> <div class="box1"><span>fdsaf</span></div><div class="box2"><span>fdsafd</span></div><div class="box3"><span>fdsafdsaf</span></div> </div> <div id="circles"><div class="circle circle1"></div><div class="circle circle2"></div><div class="circle circle3"></div></div> </div> 

Answer 1

我打算在這里走出去並說“不”，盡管從某種奇怪的方面來說技術上可行。 此外，從超級計算機程序員的角度來看，這違反了關注點的分離（有些人不關心，我知道我知道）以及一個非常奇怪的事情。

話雖這么說，我的rec是在CSS中做的全部事情（即按鈕點擊添加/切換一個類，觸發轉換或動畫）。 通過這種方式，您可以准備好一堆不同的類來為不同的狀態或按鈕或按鈕觸發不同的動畫。

相反，你可能會非常棒，並且完全放棄了css-animation，只需要在vanilla javascript中完成整個事情，或者它是較小的伙伴Jquery。

你的選擇我的朋友，但不要以你的方式混合和匹配它們，你不會有一個美好的時光。