Javascript CSS3动画：向前填充不使用Safari上的位置和显示

因此，我创建了一个CSS3动画，该动画通过将元素的不透明度从1设置为0来淡出元素，并在最后一帧将

位置更改为
绝对
，将
显示更改为
无
。但在Safari上，它只会保持不透明度，位置和显示不会设置为最终值

@-webkit-keyframes impressum-fade-out {
  0% {
    opacity: 1;
    display: block;
    position: relative;
  }
  99% {
    opacity: 0;
    position: relative;
  }
  100% {
    opacity: 0;
    display: none;
    position: absolute;
  }
}

它似乎可以在Chrome上运行，但在Safari上不行（我试过版本8）。显然，位置和显示不能与动画填充模式正常工作：向前

JSFiddle：

为赏金编辑：我知道Javascript和transitionend事件的变通方法。但我想知道为什么浏览器缺乏对这方面的支持？规范是否声明fillmode forwards不适用于某些属性，如position，或者这是浏览器中的错误？因为我在窃听器里找不到任何东西。。如果有人对此有所了解，我将非常感激
正如评论中所建议的，您可以调整高度

编辑：添加了动画参考链接







$（'.block'）。单击（function（）{$（this）.toggleClass（'active'））
@-webkit关键帧impressum淡出{
0% {
不透明度：1；
}
99% {
不透明度：0；
}
100% {
不透明度：0；
身高：0；
}
}
.街区{
宽度：100px；
高度：100px；
背景：蓝色；
}
.区块2{
宽度：100px；
高度：100px；
背景：红色；
}
.block.active{
-webkit动画名称：impressum淡出；
动画名称：impressum淡出；
-webkit动画持续时间：500ms；
动画持续时间：500ms；
-webkit动画填充模式：正向；
动画填充模式：正向；
}
我建议您基于和事件的跨浏览器解决方案：



$（'.block'）.one（'click'，function（）{
var$this=$（this）；
$this.one（'WebKittTransitionEnd transitionend transitionend'，function（）{
$this.addClass（'block_hidden'）；
$this.removeClass（'block_transition'）；
});
$this.addClass（'block_transition'）；
});
.block{
宽度：100px；
高度：100px；
背景：蓝色；
-webkit转换：不透明度0.5s；
过渡：不透明度0.5s；
}
.第2区{
背景：红色；
}
.block_转换{
不透明度：0；
}
.block_隐藏{
显示：无；
}

你的提琴似乎不起作用了：/它在Chrome和最新版本的OS X上的Safari中同样起作用<代码>显示：无
和
位置：绝对
在最后一帧不适用。但应应用
显示：无
和
位置：绝对
，因为它们是在100%帧中定义的。。。另外，它在我的Chrome 45上工作，但在Chrome 44上不工作……因为显示和位置似乎不适用于大多数浏览器，如果在最后一帧将动画元素设置为宽度/高度=0是否足够？@TimoD为什么只需要基于
动画填充模式：转发
？您仍然可以使用jQuery来更改状态。您是否对不支持
转换
/
动画
的浏览器不感兴趣？谢谢您的回答。由于我的元素是如何构造的，因此高度的解决方案不能直接用于我的。然而，你编辑的链接正是我想要的。所以我想这不起作用的原因是因为位置和显示不可设置动画。