0

我已经为具有标题文本和“阅读更多”链接的 Div-Element实现了CSS3 动画。我正在使用translateX函数从屏幕的左到右为容器设置动画。

问题是具有锚点的“阅读更多”链接在框动画时无法点击。但是当动画结束时，锚点变为可点击的。

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

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/

4

2 回答 2

0

您可以为动画使用边距或左侧位置（以便操作 DOM 而不是渲染器）

这样它就可以工作，但会失去硬件加速的好处

http://jsfiddle.net/L5tv8/1/

@keyframes titleAnimation { 
  0% {
    opacity: 0;
    margin-left:300%;
  }
  8% {
    opacity: 1;
    margin-left:10%;
  }
  17% {
    opacity: 1;
    margin-left:5%;
  }
  19% {
    opacity: 0;
    margin-left:-10%;
  }
  25% { opacity: 1 }
  100% { opacity: 1 }
}
于 2013-09-24T12:03:16.150 回答
0

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

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

于 2013-09-24T11:33:53.450 回答