css3动画transform在ie内核动画结束后子元素a标签不能点击（本人未解决，求大神带飞）
Posted fstgshow
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3动画transform在ie内核动画结束后子元素a标签不能点击（本人未解决，求大神带飞）相关的知识，希望对你有一定的参考价值。
问题描述：
css3的动画 animation属性，如果动画里面需要动画的元素是transform，那么动画的这个元素的子元素a标签就不能
点击跳转，也不能运行点击事件，就好像个a标签被透明的东西挡住了一样，目前只是发现这个问题在ie内核的浏览器上面，比如 360浏览器，ie11（考虑到测试css3动画的，没有测试ie789 10.）。而在火狐，谷歌正常。
百度了一大堆，都没有找到好的解决办法，比较接近的一个说法是，transform属性改变了元素的层级，也就是z-index属性，不过在这里a标签好像不是这个原因，希望有大神知道这个解决办法的说明下，多谢了。
解决办法一：（治标不治本，相当于没有解决）
最后找不到办法，而页面效果只是pc端跑，所以没有办法把原来transform：translate（）的属性 统统改成了 margin-left这样去位移，然后就解决了这个问题，不过这样还是不好，因为现在动画只是位移，如果是transform：rotate scale 那岂不是懵逼了...
所以，如果有大神找到怎么解决，求留言啊，求带飞求留言啊，求带飞求留言啊，求带飞求留言啊，求带飞
//下面是例子html
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
.aniD{
animation: anid 1s linear forwards;
-webkit-animation: anid 1s linear forwards;
}
@-webkit-keyframes anid {
0%{transform: translateX(-200px);}
100%{transform: translateX(0px);}
}
@keyframes anid {
0%{-webkit-transform: translateX(-200px);}
100%{-webkit-transform: translateX(0px);}
}
</style>
</head>
<body>
<div class="aniD" style="width:200px;height:200px;background:red;">
我是左上角的红色div,在ie内核浏览器比如360，ie11，如果我用了css3的transform动画，我的子元素a标签将不能直接点击
<a href="http://www.baidu.com" target="_blank" style="cursor: pointer;font-size: 14px;display: inline-block;">点击去百度</a>
</div>
</body>
<script type="text/javascript">
</script>
</html>
以上是关于css3动画transform在ie内核动画结束后子元素a标签不能点击（本人未解决，求大神带飞）的主要内容，如果未能解决你的问题，请参考以下文章