我有一个盒子并应用了一个旋转 css 动画，我想添加一个 js 函数，在动画结束时给我一个警报，我如何使用 webkitTransitionEnd 做到这一点？
这是我的代码:
.box {
background: red;
position: absolute;
padding: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}<html>
<body>
<div class="box">
</div>
</body>
</html>最佳答案
使用 css 实际上是不可能的，但是因为你的动画是 infinite 并且在 hover 事件上触发，你可以监听 mouseleave 事件(当元素不再悬停时动画停止)。
$('.box').mouseleave(function() {
console.log('animation has ended');
});.box {
background: red;
position: absolute;
padding: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>关于javascript - 告诉 css 动画结束的 js 警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43217201/