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

【问题标题】：SVG Image gets blurry and flickers when using css transform to moveSVG 图像在使用 css 变换移动时变得模糊和闪烁
【发布时间】：2017-06-03 12:10:04
【问题描述】：

如何避免使用 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%;
}

【问题讨论】：

我也有同样的问题

标签： css transform

【解决方案1】：

我认为这是一个错误。不那么整洁，但我的建议是现在只为绝对定位的元素设置动画。您可以将您的sectors-icon 定位在您想要的位置，给它relative 定位，然后使用absolute 定位将悬停动画添加到它的子img：

@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

【讨论】：