如何在悬停时停止悬浮动画答案

【问题标题】：How to stop the levitate animation when it hovers如何在悬停时停止悬浮动画
【发布时间】：2017-09-18 13:21:08
【问题描述】：

有没有办法在悬停时停止悬浮动画？

:hover

这是一个显示动画的链接：

https://codepen.io/youbiteme/pen/RprPrN

【问题讨论】：

我正在寻找悬停时停止的效果，我试过这个，但它太快了 &:hover{ 动画：暂停;有什么方法可以帮上大忙吗谢谢
Beginning and pausing SVG animations on hover的可能重复

标签： css animation sass hover transition

【解决方案1】：

你可以试试这个悬浮：

.svg:hover .leon {
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
    cursor: pointer;
}

所有人：

.svg:hover .leon,
.svg:hover .right-movment, .svg:hover .left-movment, .svg:hover  .shaddow {
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
    cursor: pointer;
}

【讨论】：

【解决方案2】：

只需为您的 svg 悬停添加动画暂停

.svg:hover .shaddow,
.svg:hover .right-movment,
.svg:hover .left-movment,
.svg:hover .leon
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

Updated Pen

【讨论】：

【解决方案3】：

.leon:hover {
    animation: none;
}

可能就是你要找的。p>

【讨论】：