Javascript CSS动画-步骤-为书签星形设置动画

我有以下代码：

let animation=document.getElementById（'fave'）；
animation.addEventListener（'click'，function（）{
$（动画）.toggleClass（'animate'）；
});
.fave{
宽度：70px；
高度：50px；
位置：相对位置；
溢出：隐藏；
}
fave img先生{
位置：绝对位置；
排名：0；
左：0；
光标：指针；
动画：测试\u动画\u反转1s步骤（55）；
}
.fave.动画制作{
动画：测试_动画1s步骤（55）；
左：-3519px；
}
@关键帧测试动画{
从{左：0；}
到{左：-3519px；}
}
@关键帧测试\u设置动画\u反转{
从{左：-3519px；}
到{左：0；}
}
为什么不使用图像实际位置的代码呢。它使用
过渡
而不是
动画
，看起来更整洁

它也将自动反转动画，并将过渡应用于元素

您可以设置禁用标志，并使用setTimeout（）在动画完成之前防止多次单击


var click\u disabled=false；
$（'.fave'）。单击（函数（）{
如果（单击“禁用”）{
return；//什么也不做
}
$（this.toggleClass（'faved'）；
//设置正确的aria标签
var label=$（this.attr（'aria-label'）=='favorite'？'favorite'：'favorite'；
$（this.attr（'aria-label'，label）；
单击_disabled=true；
//超时值应与转换长度匹配
setTimeout（函数（）{
单击_disabled=false；
}, 1000);
});
.fave{
背景：无；
边界：0；
填充：0；
宽度：70px；
高度：45px；
背景：url(https://res.cloudinary.com/shanomurphy/image/upload/v1547543273/fave_ltre0q.png)不重复；
背景位置：0；
过渡：背景1s步骤（55）；
大纲：0；
光标：指针；
}
费夫，费夫{
背景位置：-3519px 0；
}
为什么不使用图像实际位置的代码呢。它使用
过渡
而不是
动画
，看起来更整洁

它也将自动反转动画，并将过渡应用于元素

您可以设置禁用标志，并使用setTimeout（）在动画完成之前防止多次单击


var click\u disabled=false；
$（'.fave'）。单击（函数（）{
如果（单击“禁用”）{
return；//什么也不做
}
$（this.toggleClass（'faved'）；
//设置正确的aria标签
var label=$（this.attr（'aria-label'）=='favorite'？'favorite'：'favorite'；
$（this.attr（'aria-label'，label）；
单击_disabled=true；
//超时值应与转换长度匹配
setTimeout（函数（）{
单击_disabled=false；
}, 1000);
});
.fave{
背景：无；
边界：0；
填充：0；
宽度：70px；
高度：45px；
背景：url(https://res.cloudinary.com/shanomurphy/image/upload/v1547543273/fave_ltre0q.png)不重复；
背景位置：0；
过渡：背景1s步骤（55）；
大纲：0；
光标：指针；
}
费夫，费夫{
背景位置：-3519px 0；
}

Re:2.-@是的，我在问这个问题之前读过。但是，当我将其从“活动”切换到“非活动”时，如何调整它以使其可以反转？我能想到的唯一方法是添加另一个类。不过我已经试过了。请看我编辑的帖子。回复：2@是的，我在问这个问题之前读过。但是，当我将其从“活动”切换到“非活动”时，如何调整它以使其可以反转？我能想到的唯一方法是添加另一个类。不过我已经试过了。请看一下我编辑过的帖子。不过我正在尝试使用
img
，这就是为什么
transition
不适合我的原因。然而，我知道使用
背景图像
可以达到同样的效果。那么，只对我来说拍摄背景图像更好吗？我只是不太喜欢使用这个属性来显示东西，当它实际上是一个背景时，就好像它是一个对象一样。我看不出使用
img
元素有什么好处。事实上，我认为它在任何情况下都应该是
按钮
元素（最初的教程出于某种原因使用了
部分
元素。我已经更新了我的答案，使用了按钮元素，还使用了
aria标签
来实现可访问性（值通过JavaScript根据状态进行切换）但是，我正在尝试使用
img
，这就是为什么
transition
对我不起作用的原因。然而，我知道使用
background image
可以达到同样的效果。那么，只使用
background image
对我来说更好吗？我只是不太喜欢使用该属性来显示东西，就好像它是一个对象一样n它实际上是一个背景。我看不出使用
img
元素有什么好处。事实上，我想象它在任何情况下都应该是
button
元素（最初的教程出于某种原因使用了
部分
元素。我更新了我的答案，使用了button元素，还使用了
aria标签
，以便于访问（值通过JavaScript根据状态进行切换）。