html - 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