Javascript 使用JS设置元素动画

我试着把一个div从原来的位置向左移动，也就是说，向右，我的目标是div向左移动，然后向右滑动一点

只有香草JS

代码：

CSS:

leftBtn.addEventListener（“单击”，函数（）{
pushDiv.style.right=“420px”；
pushDiv.style.right=“360px”；
});
*{
框大小：边框框；
字体系列：“蒙特塞拉特”，无衬线；
过渡：0.5s缓解；
}
.持有人{
位置：绝对位置；
左：50%；
最高：50%；
高度：300px；
宽度：800px；
保证金：0自动；
背景：#eee；
转换：翻译（-50%，-50%）；
盒影：4px 9px 2px#000；
}
.推压{
宽度：350px；
位置：绝对位置；
背景#F44336；
高度：370px；
右：0；
顶部：-35px；
边界半径：5px；
}

左边
赖特

var leftBtn=document.getElementById（'leftBtn'），
pushDiv=document.getElementById（'pushDiv'）；
leftBtn.addEventListener（“单击”，函数（）{
pushDiv.style.right=“410px”；
setTimeout（函数（）{
pushDiv.style.right=“360px”；
}, 600 );
});
#pushDiv{
位置：绝对位置；
背景：红色；
顶部：100px；
右：200px；
宽度：100px；
高度：100px；
过渡期：全部6秒；
}
移动它
尝试使用css动画

JS

CSS

你的css中有转换集吗？我想你会想把第二个动作放在一个与过渡时间相同的超时时间里。是的，0.6秒的轻松度。使用css类来制作vanilla JS动画
const pushDiv = document.querySelector('.pushdiv');

leftBtn.addEventListener('click', animate());

function animate(){
    pushDiv.addClass('animation');
{

.animation{
    animation: slideleft 0.7s ease-in; 
}

@keyframes slideleft{
    // enter your animation keyframes there are some cool tutorials that will show you how to do that same effect 
}