Html CSS3铬跳跃动画中的悬停开/关效果

因此，我的悬停效果在包括IE9+在内的所有浏览器中都能正常工作，在Chrome中也能正常工作，但在某些地方悬停在元素上/下会使其跳过动画并直接捕捉到起始位置，而不是慢慢褪色

这只发生在Chrome上，是一个bug，还是我可以在我的代码中添加一些东西来平滑Chrome，并确保它总是动画化回到默认状态，而不是跳转到默认状态

它使用的是一个附加了以下类的图像，该图像还使用外部形状在其周围形成文本，因此我在下面包含了所有CSS代码-动画稍微旋转并倾斜悬停时的设备图片

.floatleft {
    float:left;
    width: 240px;
    height: 341px;
    -webkit-shape-outside: url(http://url.com/image.png);
    -o-shape-outside: url(http://url.com/image.png);
    shape-outside: url(http://url.com/image.png);
    -webkit-shape-image-threshold: 0.5;
    -o-shape-image-threshold: 0.5;
    shape-image-threshold: 0.5;
    -webkit-shape-margin: 20px;
    -o-shape-margin: 20px;
    shape-margin: 20px;
    margin:20px;
    display:inline-block;
    -webkit-transition: 0.7s ease-in-out;
    -moz-transition: 0.7s ease-in-out;
    -ms-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
    transition-timing-function: linear;
    }

.floatleft:hover, .floatleft:active
{
    -webkit-transform:rotateX(-13deg) rotate(-5deg);
    transform:rotateX(-13deg) rotate(-5deg);
    -o-transform:rotateX(-13deg) rotate(-5deg);
    -moz-transform:rotateX(-13deg) rotate(-5deg);
    -ms-transform:rotateX(-13deg) rotate(-5deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

---

这是小提琴-

你能发布一个代码笔链接或其他东西吗，这样我们就可以用正确的代码进行测试了？我不能从你的小提琴上复制它…你能给出关于如何触发它的更具体的说明吗？嗨，本，只需将鼠标移到图像上，它在Safari中应该可以很好地动画化，Firefox等-在Chrome上，它可以制作动画，但是如果你将鼠标移离某些区域，比如图片的角，而不是平滑地制作动画回到原来的位置，它会立即恢复到原来的位置。在小提琴中重新创建有点困难，但您可以尝试将鼠标悬停在手机图片的右下角，然后将鼠标移到浏览器外，它有时会弹回来。