关于javascript判断css3动画结束和css3动画结束的回调函数，下面是一个完整的攻略。
如何判断CSS3动画是否结束？
CSS3动画有两个状态：正在运行和已经结束。我们可以通过 JavaScript 来判断动画是否结束，实现各种复杂的交互效果。
在判断CSS3动画结束的时候，我们需要监听动画事件。CSS3动画有两个相关的事件：transitionend和animationend。我们可以监听这两个事件来判断动画是否结束。
- transitionend事件
当一个元素的CSS3样式发生变化时，浏览器会自动触发transitionend事件，这个事件表示CSS3过渡效果的结束。我们可以通过监听这个事件来判断CSS3动画是否结束。
代码示例：监听transitionend事件，判断CSS3动画是否结束
<!--CSS-->
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
</style>
<!-- HTML -->
<div class="box"></div>
<!-- JavaScript -->
<script>
var box = document.querySelector('.box');
box.addEventListener('transitionend', function(event) {
console.log('CSS3动画结束了！');
}, false);
box.style.width = '200px'; // 修改CSS3属性
</script>
当我们把.box的宽度从100px变成200px时，就会触发transitionend事件，从而输出'CSS3动画结束了！'。
- animationend事件
animationend事件表示CSS3动画结束的事件。当CSS3动画结束时，浏览器会自动触发animationend事件。我们可以通过监听这个事件来判断CSS3动画是否结束。
代码示例：监听animationend事件，判断CSS3动画是否结束
<!--CSS-->
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
animation: zoom-in 2s;
}
@keyframes zoom-in {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
</style>
<!-- HTML -->
<div class="box"></div>
<!-- JavaScript -->
<script>
var box = document.querySelector('.box');
box.addEventListener('animationend', function(event) {
console.log('CSS3动画结束了！');
}, false);
</script>
当.box动画结束时，就会触发animationend事件，从而输出'CSS3动画结束了！'。
如何在CSS3动画结束时执行回调函数？
除了判断CSS3动画是否结束，我们还可以在CSS3动画结束时执行回调函数。这样可以在动画结束后执行一些自定义的操作，比如修改元素的CSS样式，切换CSS类等等。
实现在CSS3动画结束时执行回调函数，我们同样需要监听transitionend和animationend事件。当这两个事件发生时，我们就可以执行对应的回调函数了。
代码示例：在CSS3动画结束时执行回调函数
<!--CSS-->
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
.box.big{
width: 200px;
}
</style>
<!-- HTML -->
<div class="box"></div>
<!-- JavaScript -->
<script>
var box = document.querySelector('.box');
box.addEventListener('transitionend', function(event) {
console.log('CSS3动画结束了！');
box.classList.add('big'); //执行回调函数，在动画结束时添加CSS类
}, false);
box.style.width = '200px'; // 修改CSS3属性
</script>
当CSS3动画结束时，回调函数就会被执行。上述代码在CSS3动画结束时，会给.box添加一个CSS类'big'，从而把.box变成宽度为200px，高度为100px的红色正方形。
如果你想在CSS3动画开始时执行回调函数呢？我们可以通过监听transitionstart和animationstart事件来实现。
代码示例：在CSS3动画开始时执行回调函数
<!--CSS-->
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
.box.big{
width: 200px;
}
</style>
<!-- HTML -->
<div class="box"></div>
<!-- JavaScript -->
<script>
var box = document.querySelector('.box');
box.addEventListener('transitionstart', function(event) {
console.log('CSS3动画开始了！');
box.classList.add('big'); //执行回调函数，在动画开始时添加CSS类
}, false);
box.style.width = '200px'; // 修改CSS3属性
</script>
当CSS3动画开始时，回调函数就会被执行。上述代码在CSS3动画开始时，会给.box添加一个CSS类'big'，从而把.box变成宽度为200px，高度为100px的红色正方形。
以上就是关于“JavaScript判断CSS3动画结束和CSS3动画结束的回调函数”的完整攻略，希望对你有所帮助！