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
Post a Comment