Question

我有一个简单的GIF图像，我正在应用关键帧动画（使其无限旋转），出于某种原因，如果我将鼠标悬停在页面上其他位置的链接上，它们会随机向上或向下跳跃一个像素或二。

当我删除其上有动画的DOM元素（图像）时，跳跃不会发生，这让我相信它是以某种方式由CSS动画引起的。这只发生在Chrome中，即使是Chrome的最新更新。

我已经在这里阅读了所有其他相关问题，但尚未解决任何问题，这不是此处所需的-webkit-backface-visibility修复。

示例CSS：

@mixin spin {
    -webkit-animation: spin360 1.26s infinite linear;
    animation: spin360 1.26s infinite linear;
}
@-webkit-keyframes spin360 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin360 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.animated-image {
    position: absolute;
    @include spin;
}

示例DOM：

<h3 class="header">
    <a href="#" class="link">Heading title</a>          
</h3>

<div class="animated-image"><img src="../img/loader.gif"></div>

工作示例：http://codepen.io/caseytrombley/pen/YWYqRQ

Answer 1

我认为问题在于镀铬，它不是垂直和水平居中的。

我建议您使用flexbox居中并且必须修复

其他方式是使用img like background image并放入

background-position: center center;
background-size: contain;

但我可以想象它是一个GIF动画，在这种情况下必须用flex修复

使用CSS动画会导致页面上的其他随机链接在Chrome中悬停时跳转

1 个答案: