While experimenting with some animations, I encountered a small issue: When trying to animate a div that has an image as its background, the image appears to shake, especially when expanding and shrinking the div from the center. Is there a way to prevent this from happening? Or is there a simpler method to animate it smoothly? Thank you in advance.
HTML
<div class = 'button'>
<div class = 'background'></div>
</div>
CSS
.button {
border : 5px solid black;
border-radius : 50%;
height : 150px;
width : 150px;
animation : bigger 2s ease-in-out 0s infinite;
}
.background{
height : 100%;
width : 100%;
background : url('https://image.flaticon.com/icons/svg/69/69434.svg') no-repeat;
background-size : 90%;
background-position : center;
}
@keyframes bigger {
0% {
height : 150px;
width : 150px;
}
100%{
margin-left : -5px;
margin-top : -5px;
height : 160px;
width : 160px;
}
You can see an example of the issue on CodePen: https://codepen.io/pen/