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

私はそれはいくつかのbizarro方法で技術的に可能であるかもしれないにもかかわらず、ここに手足に出て行って、「ノー」と言うつもりです。また、プログラマーの視点から見ると、これは懸念の分離に違反している（一部の人は気にしない、私が知っていることは分かっている）だけでなく、非常に奇妙なことだ。

言われているように、私は、CSSですべてのことをやっています（つまり、ボタンのクリックはトランジションやアニメーションをトリガーするクラスを追加/切り替えます）。このようにして、さまざまな状態やボタンの押下やwhatevのために別のアニメーションを起動する準備ができた、さまざまなクラスのクラスを用意することができます。

逆に、あなたは完全に素晴らしいかもしれないし、バニラのjavascriptで全体をやっているだけで、CSSのアニメーションを完全に排除することができますか、それはより小さいsidekick Jqueryです。

あなたの選択は私の友人ですが、思いついた方法でそれらを混ぜ合わせてはいけません。あなたはすばらしい時間を過ごすつもりはありません。