css3动画transform在ie内核动画结束后子元素a标签不能点击（本人未解决，求大神带飞）

时间 2020-08-09

标签 css3 css 动画 transform 内核结束元素标签不能点击本人未解决栏目 CSS 繁體版

原文原文链接

问题描述：

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>

.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,在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>

</html>