悬停时触发css剪辑路径动画答案

【问题标题】：css clip path animation trigger on hover悬停时触发css剪辑路径动画
【发布时间】：2017-09-22 12:16:50
【问题描述】：

我正在构建一个动画菜单，以在悬停时显示剪辑动画。而不是在鼠标移出时淡出。

我在弄清楚如何应用悬停时遇到问题，因为“悬停”的表格在动画开始时被完全剪裁，如果鼠标在桌子上移动，这会导致动画重新开始。猜猜问题是元素在鼠标仍然悬停时改变了形状。

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

我并不是真的在寻找完整的 css 解决方案，而是想避免使用 jquery。

【问题讨论】：

【解决方案1】：

将悬停状态应用于容器：

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

【讨论】：