1
Gibt es eine Möglichkeit, die CSS-Animation vollständig mit JavaScript zu steuern? Ich muss den Status der Animation ändern, indem ich auf die Schaltfläche klicke.Steuern der CSS-Animation
Gibt es eine Möglichkeit, den Animationsstatus auf 50% zu ändern, wenn auf die Schaltfläche geklickt wird?
Ich möchte einen Schieberegler mit minimalen js machen, aber diese kleinen Punkte zu behandeln.
Wenn es keine Möglichkeit gibt, das zu tun, könnten Sie mir sagen, wie man das mit anderen Methoden macht?
#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>
Wann wird geklickt? – ksav
Ich meine diese Punkte. –
Was meinst du damit, den Zustand zu ändern? –