Flicker problem at the end of css animation

<!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>
The

code is as above. The problem now is that when the blur value of the picture returns to 0, it will flicker (after the end of the animation), that is, the effect is as follows: 


:

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



:chrome v66
Css html
Mar.09,2021

the flash is that the animation is finished, and when you return to the original mode of the element, it will flash because there is no filter .
implement it with transition instead. Animation is more suitable for expressing the dynamic effect of the cycle.

probably means that you first write filter: blur (10px); to the element ontology, then write transition to 1s execution time (if you need to overlay other effects, you need to write down the attribute Filter), and then write a single class, in which you put filter: blur (0); , finally design the trigger time to stack this class on the element. 

img {
  width: 260px;
  height: 255px;
  filter: blur(10px);
  transition: filter 2s;
}
.blur{
  filter: blur(0px);
}
<img src={QRcode} className={icon === STATIC.PC ? 'blur' : ''}/>

//

filter: blur (0px); change
to
filter: none;
can solve the problem. 

.qrcode *{
            -webkit-backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
        }

try

Previous: Regular verification can be marked with a *.

Next: In Javascript, Array.isArray () judges the problem.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu