I am facing an issue with a keyframe spinner that rotates an image on the y-axis. It works perfectly in Chrome but fails to function in Firefox. I have tried changing the HTML tags to div or span class/id, but nothing seems to work. Interestingly, other keyframe utilities on the website function properly in Firefox except for this specific one.
Another problem that I have encountered is with a keyframe marquee that scrolls text, causing all text in the viewing area to appear fuzzy only on Firefox. However, the fuzziness disappears when the marquee is out of view. Removing the marquee code resolves the issue and the text displays correctly. I am hoping to receive some assistance regarding this issue. The CSS and HTML for the spinner are provided below...Thank you.
css
@keyframes spinner {
from {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
} }
.spinner {
-webkit-animation-name: spinner;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 15;
-webkit-animation-duration: .8s;
-webkit-animation-delay: 4s;
-ms-animation-name: spinner;
-ms-animation-timing-function: ease;
-ms-animation-iteration-count: 15;
-ms-animation-duration: .8s;
-ms-animation-delay: 4s;
animation-name: spinner;
animation-timing-function: ease;
animation-iteration-count: 15;
animation-duration: .8s;
animation-delay: 4s;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
html snippet
<table><tr>
<th>
<span class="spinner"><img src="https://copy.com/8hR4hdxIf2oO0T6x" width="106px" height="210px"></span>
</th>