iAd Producer 3：应用动画后，视频元素和嵌入式地图上的触碰事件可能会被忽略

应用动画后，视频元素和嵌入式地图上的触碰事件可能会被忽略

尝试对使用 CSS 动画的视频或地图应用变换动画时会出现这个问题。如果对其中一个元素应用了变换动画，那么在动画结束之前，它不会响应触碰事件。如果动画使用“-webkit-animation-fill-mode: forwards”，即使在动画结束之后，它也不会响应触碰事件。

重新构建 CSS，以便不需要向前填充。查看下方的代码示例。

video {

left: 0px;

-webkit-animation-name: slide-in;

-webkit-animation-duration: 2s;

}

@-webkit-keyframes slide-in {

from { -webkit-transform: translate3d(-320px, 0, 0); }

to { -webkit-transform: translate3d(0, 0, 0); }

}

使用这种技巧，视频会被定位到最后的休止位置，然后以动画第一个关键帧的画面移出屏幕。由于动画的最后一个关键帧只是身份转换，因此不需要填充。

如果无法以这种方式重新构建 CSS，还可以使用另一种技巧，即使用 JavaScript 来监听动画的“webkitAnimationEnd”事件，然后明确地设置这个元素的最终位置。