cssクリップパスのアニメーショントリガーでホバー

Question

私はクリップアニメーションでホバーに表示されるアニメーションメニューを構築しています。マウスアウト時にフェードアウトするよりも。

「ホバリング」テーブルがアニメーションの開始時に完全にクリップされ、マウスがテーブル上を移動している場合にアニメーションが再開するため、ホバーを適用する方法がわかりません。マウスがまだホバリングしている間に問題が変化する要素であることを推測してください。 https://codepen.io/anon/pen/YrGzwE

table:hover { 
    animation: load 0.45s ease-out; 
    opacity: 1; 
} 

私は本当にフルCSSの解決策を探していないよしかし、jqueryのを避けたい：ここ

は、そのルックスが好きなようです。

Answer 1

がコンテナにホバー状態を適用します。

#tableContainer:hover table { 
    animation: load 0.45s ease-out; 
    opacity: 1; 
} 

https://codepen.io/anon/pen/xXEVRv