Menu
What can I do to avoid the image blurry/flickering issue when using CSS transform? I've tried a bunch of suggestions from CSS transition effect makes image blurry / moves image 1px, in Chrome?, but cannot seem to figure it out.
I've attached the plunker 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
/* Styles go here */
.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%;
}
945
I think it's a bug. Not as neat but my recommendation is to just go with animating an absolutely positioned element for now. You can position your sectors-icon where you want it, give it relative positioning and then add the hovering animation to it's child img with absolute positioning:
@keyframes floating_fixed_income {
0% {
top: 0;
}
12.5% {
top: 20px;
}
25% {
top: 10px;
}
50% {
top: 100px;
}
62.5% {
top: 50px;
}
75% {
top: 20px;
}
100% {
top: 0;
}
}
https://plnkr.co/edit/YHIeL9vO2nQpTaoBpup3?p=preview
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
