CSS3动画 - 使用转换时不会触发animationstart事件:

鉴于以下内容:

.slide{
  transition: all 1s ease 0s;
  transform: translateX(-100%);
}

和

document.documentElement.addEventListener('animationstart', function() {
  alert(1);
}, false); 

事件不会发生.

但是,如果CSS是:

.slide {
  animation: slide 1s infinite
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to { 
    transform: translateX(-100px);
   }
}

它确实很火.

怎么会？在这两种情况下都是动画,但是,在第一种情况下,我们不使用具有其他负面后果的关键帧.

这不是浏览器如何实现此功能的错误吗？

这是第一个例子:

http://jsbin.com/hizoyopimu/1/edit?html,css,js,console,output

第二个:

http://jsbin.com/yegidehusi/1/edit?html,css,js,console,output

有没有相当的东西？

TL; DR(简答):

截至目前,没有任何事件在转换开始时被触发.转换总是仅在满足触发条件时发生,因此触发转换的事件可大致被视为等同于transitionstart事件.

在下面的代码片段中,我添加了一个用户定义的函数(transitionStart),它在调用后立即被调用.addClass('slide'),这相当于transitionstart.

/* For Animation Start */
setTimeout(function() {
  $('.animated').removeClass('hide').addClass('slide');
}, 1000);

$('.animated').bind('animationstart webkitAnimationStart', function() {
  console.log('Animation Started');
});

/* For Transition Start */
setTimeout(function() {
  $('.animated').removeClass('hide').addClass('slide');
  transitionStart();
}, 1000);

function transitionStart(){
  console.log('Transition Started');
}

.element {
  padding: 10px;
  background-color: #ccc;
  width: 100px;
  height: 100px;
}
.element.animated.hide {
  display: none;
}
.animated.slide {
  animation: slide 1s infinite
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100px);
  }
}
.element.transitioned.hide {
  transform: translateX(-100%);
}
.transitioned.slide {
  transition: all 2s ease-in 0s;
  transform: translateX(200%);
}

Element with Animation

  box


Element with Transition

  box