html - CSS 3 Keyframes Animation (Opacity) Causes Images to Blur at the End -


the animation happens perfectly, images not blurred etc. when finishes, image blurred , stays that. browser testing chrome, regardless of browser, happens. images used in blink animation not scalet, shown in original size. here's css:

@charset "utf-8";  @-webkit-keyframes blink {     0% {         opacity:0;     }     11%, 22% {         opacity:1;     }     33%, 100% {         opacity:0;     } }  @-moz-keyframes blink {     0% {         opacity:0;     }     11%, 22% {         opacity:1;     }     33%, 100% {         opacity:0;     } }  @-o-keyframes blink {     0% {         opacity:0;     }     11%, 22% {         opacity:1;     }     33%, 100% {         opacity:0;     } }  @keyframes blink {     0% {         opacity:0;     }     11%, 22% {         opacity:1;     }     33%, 100% {         opacity:0;     } }  .blink {     opacity:0;      -webkit-animation-duration: 6s;     -moz-animation-duration: 6s;     -o-animation-duration: 6s;     animation-duration: 6s;      -webkit-animation-name:blink;     -moz-animation-name:blink;     -o-animation-name:blink;     animation-name:blink;      -webkit-animation-fill-mode: forwards;     -moz-animation-fill-mode: forwards;     -o-animation-fill-mode: forwards;     animation-fill-mode: forwards; }  .delay-1{     -webkit-animation-delay: 1s;     -moz-animation-delay: 1s;     -o-animation-delay: 1s;     animation-delay: 1s; }  .delay-3{     -webkit-animation-delay: 3s;     -moz-animation-delay: 3s;     -o-animation-delay: 3s;     animation-delay: 3s; }  .delay-5{     -webkit-animation-delay: 5s;     -moz-animation-delay: 5s;     -o-animation-delay: 5s;     animation-delay: 5s; }  .loop {     -webkit-animation-iteration-count: infinite;     -moz-animation-iteration-count: infinite;     -o-animation-iteration-count: infinite;     animation-iteration-count: infinite; }  .timingeasein {     -webkit-animation-timing-function: ease-in;     -moz-animation-timing-function: ease-in;     -o-animation-timing-function: ease-in;     animation-timing-function: ease-in; } 

and

-webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both; 

is coming .css file. ideas? thanks!

same-thing happening me, if add

-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

it no longer blurs me.


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -