控制CSS动画

Controlling CSS animation

本文关键字：动画 CSS 控制      更新时间：2023-09-26

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

我要冒险说"不"，尽管这在技术上可能是可行的。此外，从超级书呆子程序员的角度来看，这违反了关注点分离（有些人不在乎，我知道我知道），也是一件非常奇怪的事情

话虽如此，我的rec是在CSS中完成全部工作（即单击按钮添加/切换一个类，从而触发转换或动画）。通过这种方式，你可以有一堆不同的类，准备为不同的状态或按钮按下或其他什么触发不同的动画。

相反，你可能会非常棒，完全放弃css动画，只需用普通的javascript或它的小助手Jquery来完成整个事情。

你的选择，我的朋友，但不要按照你的想法混合搭配，你不会玩得很开心。

相关文章：