CSS animation-fill-modeが表示に機能しない：なし

Question

cssクラスに基づいてカルーセルのボタンを表示/非表示する次のコードがあります。 hideButtonを除いて、すべてが意図どおりに機能しますが、アニメーションが完了した後は表示が「なし」に設定されません。

効果は、ボタンが消えても基本の項目の上にあり、クリックがクリックされないようにすることです。

.pills-tab-carousel__button { 
    position: absolute; 
    top: 0; 
    height: 100%; 
    line-height: 100%; 
    width: 64px; 
    animation: showButton .5s forwards; 
} 

.pills-tab-carousel__button--hidden { 
    animation: hideButton .5s forwards; 
} 

@keyframes hideButton { 
    0% { 
    opacity: 1; 
    display: block; 
    } 
    100% { 
    opacity: 0; 
    display: none; 
    } 
} 

@keyframes showButton { 
    0% { 
    opacity: 0; 
    display: none; 
    } 
    1% { 
    opacity: 0.01; 
    display: block; 
    } 
    100% { 
    opacity: 1; 
    display: block; 
    } 
} 

Answer 1

visibility: hidden;を使用しない理由は、要素が既に絶対的な位置にあるためレイアウトを心配する必要がないためです。

私が作成したフィドルチェックアウト：hidden`要素が通じクリックすることが許さ：

https://jsfiddle.net/uvxeqaLn/

Answer 2

あなたはdisplayプロパティをアニメーション化することはできません。

代わりに、pointer-events: none;というプロパティを設定して、クリックが隠された要素を通過するようにすることもできます。

IE11より前のバージョンのIEではサポートされていません。