Question

所以我的悬停效果在包括IE9 +在内的每个浏览器中都能正常工作，并且它在Chrome中可以正常工作，除非在某些地方悬停/关闭元素可以让它跳过动画并直接回到起始位置而不是慢慢淡出。

这只适用于Chrome，它是一个错误，还是我可以在我的代码中添加一些内容来为Chrome添加内容，并确保它始终动画回到默认状态而不是跳转到它。

它使用附加了以下类的图像，图像也使用shape-outside在其周围形成文本，所以我已经包含了下面的所有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;
}

继承小提琴 - http://jsfiddle.net/d5wnnqfd/

CSS3中的CSS3悬停开/关效果跳过动画

0 个答案: