Question

使用CSS转换时，如何避免图像模糊/闪烁问题？我已经尝试了CSS transition effect makes image blurry / moves image 1px, in Chrome?的一些建议，但似乎无法弄明白。

我在下面附上了plunker代码。

https://plnkr.co/edit/kXbrxjnD0llt3u8dBujv?p=preview

的index.html

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
                    <img src="usequities_green.svg" class="sample_fixed_income">

<section class="sectors">
    <div class="container index-container-responsive">
        <div class="row">
                <div class="sectors-icon">
                    <img src="usequities_green.svg" class="sectors-icon-container fixed_income">
                </div>
        </div>
    </div>
</section>  </body>

</html>

的style.css

/* Styles go here */


.sectors {
    background-color: #30B784;
    color: white;
    display: flex;
    height: 680px;
    align-items: center;
    justify-content: center;
    position: relative;

}

.sectors__section__title {
    font-size: 32px;
    line-height: 48px;
}

.sectors-icon .sectors-icon-container{
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 10px 40px 0 rgba(23, 28, 33, 0.13), 0 31px 13px 0 rgba(23, 28, 33, 0.05);
    opacity: 1;
    transition: margin 0s cubic-bezier(0.2,0.6,0.3,1), opacity 0s ease;
}

@keyframes floating_fixed_income {
    0% {
        transform: translate(0%,0%);
    }
    12.5% {
        transform: translate(-2%,1%);
    }
    25% {
        transform: translate(-4%,2%);
    }
    50% {
        transform: translate(-2%,3%);
    }
    62.5% {
        transform: translate(0%,2%);
    }
    75% {
        transform: translate(1%,1%);
    }
    100% {
        transform: translate(2%,0%);
    }
}

.sectors-icon-container.fixed_income {
    animation-name: floating_fixed_income;
    animation-duration: 5s;
    height: 112px;
    background-size: 112%;
    width: 112px;
    margin-left: 73%;
    margin-top: -11%;
}

Answer 1

我认为这是一个错误。虽然不是很整洁，但我的建议是暂时使用一个绝对定位元素的动画。您可以将sectors-icon放置在您想要的位置，为其relative定位，然后将悬停动画添加到img absolute位置{@ 1}}：

@keyframes floating_fixed_income {
    0% {
        top: 0;
    }
    12.5% {
        top: 20px;
    }
    25% {
        top: 10px;
    }
    50% {
        top: 100px;
    }
    62.5% {
        top: 50px;
    }
    75% {
        top: 20px;
    }
    100% {
        top: 0;
    }
}

https://plnkr.co/edit/YHIeL9vO2nQpTaoBpup3?p=preview

使用css变换移动时，SVG图像变得模糊和闪烁

1 个答案: