html - 链接在 CSS 3 动画中不起作用

Question

我已经为 Div 元素实现了一个 CSS3 动画，其中包含标题文本和“阅读更多”链接。我正在使用 translateX 函数从屏幕的左到右为容器设置动画。

问题是“阅读更多” - 带有 anchor 的链接在框动画时变得不可点击。但是当动画结束时， anchor 变为可点击的。

谁能帮我找出这背后的问题？

HTML

<div>
  <h3>Title1</h3>
  <p class="sub-text">Title1 Desc </p>
  <p class="read-more"><a href="#">Read More</a></p>
</div>

CSS

div {
  z-index: 1000;
  position: absolute;
  bottom: 30px;
  left: 27%;
  width: 62%;
  text-align: left;
  background: rgba(0,0,0, 0.6) none repeat scroll 0 0;
  opacity: 0;
  -webkit-animation: titleAnimation 36s linear infinite 0s;
  -moz-animation: titleAnimation 36s linear infinite 0s;
  -o-animation: titleAnimation 36s linear infinite 0s;
  -ms-animation: titleAnimation 36s linear infinite 0s;
  animation: titleAnimation 36s linear infinite 0s;
}
div h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 3em;
  padding: 0 25px;
  margin: 30px 0px 5px 0px;
  color: rgba(255,255,255,0.8);
}
div p.sub-text {
  font-family: 'Roboto', sans-serif;
  font-size: 1.2em;
  padding: 5px 25px;
  color: rgba(255,255,255,0.6);
  margin: 0px;
}

div p.read-more {
  font-family: 'Roboto', sans-serif;
  font-size: 0.8em;
  padding: 10px 25px 20px; 
}
div p.read-more a {
  padding: 10px 10px 10px 20px;
  display: inline-block;
  background: rgb(223, 75, 20);
  text-decoration: none;
  color: rgba(255,255,255,0.6);
  margin: 0px;
  font-weight: 700;
}

titleAnimation { 
  0% {
    opacity: 0;
    -webkit-transform: translateX(300%);
  }
  8% {
    opacity: 1;
    -webkit-transform: translateX(10%);
  }
  17% {
    opacity: 1;
    -webkit-transform: translateX(5%);
  }
  19% {
    opacity: 0;
    -webkit-transform: translateX(-10%);
  }
  25% { opacity: 0 }
  100% { opacity: 0 }
}

工作样本是 http://jsfiddle.net/a4enq/

Answer 1

为什么要在链接移动时尝试点击它？

无论如何，我相信这是默认的浏览器行为 (Chrome)，因为当您使用 translate(X,Y,Z,3d) 时，它会创建一个新的元素层，并重新绘制您正在移动的元素，使一切都定位:相对并禁用所有 anchor ，直到动画停止。