问控制CSS动画
EN

Stack Overflow用户

提问于 2016-07-18 19:02:49

回答 1查看 161关注 0票数 1

有没有办法用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>