What can I do to avoid blurring / flickering when using CSS transform? I tried a bunch of suggestions from CSS transition effect makes the image blurry / moves the 1px image, in Chrome? but it may not seem that this is understandable.
I added the plunger code below.
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
.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%; }
source share