控制CSS动画

Question

Is there any way to fully control the CSS animation with javascript? I need to change state of the animation by clicking the button.

@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);}}

Is there any possibility to change animation state to 50% when the button is clicked?

I want to make a slider with minimum js, but need to handle this small dots.

If there is no way to do that, could you tell me how to do that with different way?

 #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

I'm going to go out on a limb here and say "no", even though it might be technically feasible in some bizarro way. Also, from a uber-nerd programmer perspective, this is violating separation of concerns (some people don't care, i know i know) as well as a pretty weird thing to do.

That being said, my rec is do the whole thing in CSS (ie the button click adds/toggles a class, which triggers the transition or animation). This way, you could have a bunch of different classes ready to go to fire different animations for different states or button presses or whatevs.

Conversely, you could be completely awesome and ditch the css-animation altogether just do the whole thing in vanilla javascript or it's lesser sidekick Jquery.

Your choice my friend, but don't mix and match them the way you have in mind, you're not going to have a great time.