css3设置动画不循环播放,如果设置css3动画为循环播放，js怎么判断动画第一次播放结束呢？...

要设置 CSS3 动画不循环播放，只需要将 `animation-iteration-count` 属性设置为 `1` 即可。如果要判断 CSS3 动画第一次播放结束，可以使用 `animationend` 事件。该事件会在 CSS3 动画播放完毕后触发，可以通过 JavaScript 添加事件监听器来监听该事件。例如：

<div id="box"></div>

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: my-animation 1s;
  animation-iteration-count: 1; /* 设置动画不循环播放 */
}

@keyframes my-animation {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

var box = document.getElementById('box');
box.addEventListener('animationend', function() {
  console.log('动画播放完毕！');
});

在上面的代码中，我们通过 `animation-iteration-count` 属性将动画设置为不循环播放，然后通过 `animationend` 事件监听动画播放完毕的事件。当动画播放完毕后，会在控制台输出一条信息。