Encountering a peculiar iOS glitch while implementing CSS animations for moving shapes on a webpage. The issue arises when the shapes, initially displayed at full size, gradually shrink and fade out during animation. However, towards the end of the animation in Safari or Chrome on iOS, they momentarily revert to full opacity and their original image size. This unexpected behavior is akin to popcorn popping as multiple objects move across the page. To see the problem firsthand, visit: . Any insights into what might be causing this strange behavior?
#logo-one {
opacity: 0;
background: url("../img/animation-sprites.png") no-repeat;
width: 52px;
height: 58px;
background-position: 0 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: changeSize-one 3s 5s infinite linear both;
-moz-animation: changeSize-one 3s 5s infinite linear both;
-o-animation: changeSize-one 3s 5s infinite linear both;
animation: changeSize-one 3s 5s infinite linear both;
right: -52px;
position: absolute;
}
@-webkit-keyframes changeSize-one {
0% {
opacity: 1;
transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
top: 120px;
right: -52px;
}
50% {
opacity: .5;
transform: rotate(15deg) scale(0.77);
-ms-transform: rotate(15deg) scale(0.77);
-webkit-transform: rotate(15deg) scale(0.77);
right: 200px;
top: 60px;
}
100% {
opacity: 0;
transform: rotate(30deg) scale(0.29);
-ms-transform: rotate(30deg) scale(0.29);
-webkit-transform: rotate(30deg) scale(0.29);
right: 430px;
top: 0;
}
}