如何在javascript中使用css关键帧动画

有没有一种方法可以通过向类中添加animate属性来使用CSS关键帧移动对象。这样，当您单击某个按钮时，类将附加到对象，从而创建动画？这是你的密码

函数开始（）{
document.getElementById（'up'）。onclick=function（）{
document.getElementById（'red'）.className=“uppy”；
};
document.getElementById（'do'）。onclick=function（）{
document.getElementById（'red'）.className=“downy”；
};
}
start（）
#区域{
高度：400px；
宽度：400px；
边框：1px纯黑；
}
#红色的{
高度：25px；
宽度：25px；
背景：红色；
}
#btn行{页边距顶部：20px；}
毛茸茸的{
-moz动画：下降1s；
动画：向下1s；
}
乌比分区{
-moz动画：最多1s；
动画：上升1秒；
}
@关键帧向下{
从{top:0；}
到{top:50px；}
}
@-moz关键帧向下移动{
从{top:0；}
到{top:50px；}
}
@向上设置关键帧{
从{底部：0；}
至{底部：50px；}
}
@-moz向上设置关键帧{
从{底部：0；}
至{底部：50px；}
}

向上的
向下
将
位置设置为
相对
在
#red
元素处，将
动画填充模式设置为
向前
在
.downy


函数开始（）{
document.getElementById（'up'）。onclick=function（）{
document.getElementById（'red'）.className=“uppy”；
};
document.getElementById（'do'）。onclick=function（）{
document.getElementById（'red'）.className=“downy”；
};
}
window.onload=开始
#区域{
高度：400px；
宽度：400px；
边框：1px纯黑；
}
#红色的{
高度：25px；
宽度：25px；
背景：红色；
位置：相对位置；
}
#btn行{
边缘顶部：20px；
}
毛茸茸的{
-moz动画：下降1s；
动画：向下1s；
-moz动画填充模式：正向；
动画填充模式：正向；
}
乌比分区{
-moz动画：最多1s；
动画：上升1秒；
}
@关键帧向下{
从{
顶部：0px；
}
到{
顶部：50px；
}
}
@-moz关键帧向下移动{
从{
顶部：0px；
}
到{
顶部：50px；
}
}
@向上设置关键帧{
从{
底部：0；
}
到{
底部：50px；
}
}
@-moz向上设置关键帧{
从{
底部：0；
}
到{
底部：50px；
}
}

向上的
向下
将javascript更改为：

<script>
        function start() {
              document.getElementById('up').onclick = function(){
                 document.getElementById('red').className = "uppy";
              }

              document.getElementById('do').onclick = function(){
                document.getElementById('red').className = "downy";

            }
        }
        window.onload =start;

    </script>

我无法让它在JSBin中工作，所以我将它复制到JSFIDLE。我在
#red
元素中添加了
position:absolute
，它就成功了！（可能需要一些调整，但这取决于你）嘿，当我继续单击按钮时，有没有办法继续向下移动对象。或者我必须用javascript创建类似的东西吗？应该是可能的，但超出了实际问题的范围“有没有办法通过向类添加animate属性来使用CSS关键帧移动对象？”？将需要从{top:0px；}
更改
，它在
0px
#red{ height:25px; width:25px; background:red; position:relative;}