鏈接不要在CSS 3動畫

工作我實現了一個CSS3動畫一個DIV-元素具有標題文本和「更多」連桿式。我正在使用translateX函數從屏幕的左側到右側爲容器設置動畫。鏈接不要在CSS 3動畫

的問題是，「更多」 -link它有一個錨去，而盒子動漫無法點擊。但是當動畫結束時，錨點變得可點擊。

誰能幫我找到這背後的問題？

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/

來源

2013-09-24 bleedCoder

只是給的代碼，而不是CSS是不會，如果你需要幫助的工作。我們需要知道至少它正在發生的瀏覽器，以及JSfiddle上的可用代碼示例，它重現了這個問題。 –

雅，提供一個jsfiddle複製你的問題，請 –

是的，顯然，在CSS的過渡期間，元素是隻讀的，他們不能點擊。你無法對此做任何事情。 –

爲什麼你會想嘗試，並單擊而其運動的聯繫？無論如何，我相信這是默認的瀏覽器行爲（Chrome），因爲當您使用translate（X，Y，Z，3d）時，它創建了一個移動和重繪要移動的元素的新圖層並使所有位置：相對並禁用所有錨，直到動畫停止。

來源

2013-09-24 11:33:53

我不打算在動畫製作時點擊錨，當動畫慢下來時，我可能需要點擊readmore。那麼，替代解決方案是什麼？ – bleedCoder

另一種方法是使用jQuery並從左向右定位絕對位置，因爲這樣做不會創建一個像CSS3動畫的圖層可以。 –

你可以使用保證金或左側位置爲動畫（因此在操作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-24 12:03:16

鏈接不要在CSS 3動畫

回答

相關問題