鍍金池/ 問答/HTML/ css 動(dòng)畫結(jié)束閃爍問題

css 動(dòng)畫結(jié)束閃爍問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .qrcode {
            margin-bottom: 4px;
            padding-top: 10px;
        }
        .qrcode img {
            width: 260px;
            height: 255px;
            padding-top: 20px;
            margin-bottom: 10px;
        }
        .qrcode .blur{
            -webkit-backface-visibility: hidden;
            animation: toReal 1s;
        }
        @keyframes toReal {
            from {
                filter: blur(10px);
            }
            to {
                filter: blur(0px);
            }
        }
    </style>
</head>
<body>
<div class="qrcode">
    <img src="./src/assets/background/qrcode.png" class="blur" />
</div>
</body>
</html>

代碼如上。現(xiàn)在出現(xiàn)的問題是，圖片模糊值回到0時(shí)會(huì)出現(xiàn)閃爍（動(dòng)畫結(jié)束后），即效果如下：
圖片描述


已嘗試屬性有：

 -webkit-transform-style: preserve-3d;
  animation-fill-mode: forwards;
  -webkit-backface-visibility: hidden;
  -webkit-transform:translate3d(0,0,0);    


均無效，不排除自己沒弄對(duì)。
運(yùn)行環(huán)境：chrome v66。
希望有會(huì)的同學(xué)幫忙看下。
回答
編輯回答
念初

filter: blur(0px);
改為
filter: none;
可以解決問題。

2017年5月25日 11:38
編輯回答
胭脂淚

閃那一下是動(dòng)畫執(zhí)行完了，回歸到元素的原有模式時(shí)，因?yàn)闆]有filter所以會(huì)閃一下。
換用transition實(shí)現(xiàn)吧。animation更適合表現(xiàn)循環(huán)的動(dòng)效。

大概其就是你先把filter: blur(10px);寫到元素本體上去，然后寫個(gè)transition給1s的執(zhí)行時(shí)間（如果還需要疊加其它效果的話，需要寫下屬性過濾），然后再單寫一個(gè)類，里邊就放filter: blur(0);，最后設(shè)計(jì)觸發(fā)時(shí)機(jī)把這個(gè)類疊到元素上就行了。

2018年2月14日 13:29
編輯回答
赱丅呿
img {
  width: 260px;
  height: 255px;
  filter: blur(10px);
  transition: filter 2s;
}
.blur{
  filter: blur(0px);
}
<img src={QRcode} className={icon === STATIC.PC ? 'blur' : ''}/>

// 是這樣嗎，沒有過渡效果，哪里寫錯(cuò)了嗎
2017年5月12日 13:09