Issues with CSS3 keyframe animations failing to function in Firefox and IE

Question

Issues with CSS3 keyframe animations failing to function in Firefox and IE

My CSS code is functioning properly in Chrome and Safari, but not in Firefox, IE, and Opera when I create the @keyframes rotate {}. It seems that these 4 lines might be causing the issue:
animation-duration: 4s;

animation-timing-function: linear;

animation-name:"rotate";

animation-iteration-count: infinite;

Is it due to these lines or the keyframe method itself? How can I resolve this?

CSS:

@-webkit-keyframes rotate {
        /* Keyframe animations for Webkit browsers */
    }

    /* Keyframe animations for Firefox */
    @-moz-keyframes rotate {
        /* Keyframe animations for Firefox */
    }

    /* Standard keyframe animations */
    @keyframes rotate {
        /* Standard keyframe animations */
    }

    /* Keyframe animations for Internet Explorer */
    @-ms-keyframes rotate {
        /* Keyframe animations for IE */
    }

    /* Keyframe animations for Opera */
    @-o-keyframes rotate {
        /* Keyframe animations for Opera */
}

internet-explorer css firefox css-animations

Answer 1

Answer №1

To make the animation work, simply remove the double quotes from the animation name (rotate instead of "rotate").

Here is a link to a running demo:

Check out the demo

-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:rotate;
-webkit-animation-iteration-count: infinite;

-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:rotate;
-moz-animation-iteration-count: infinite;

-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:rotate;
-ms-animation-iteration-count: infinite;

-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:rotate;
-o-animation-iteration-count: infinite;

animation-duration: 4s;
animation-timing-function: linear;
animation-name:rotate;
animation-iteration-count: infinite;

Make sure the non-prefixed properties are always placed after the vendor-specific ones for proper functionality.

P.S: If you're not familiar with it, there are tools available that can automatically add prefixes to your code before compiling (such as Prefixr) or even during runtime (like prefix-free).

By the way, I really like your animation, great job! :)

Answer 2

To make the animation work, simply remove the double quotes from the animation name (rotate instead of "rotate").

Here is a link to a running demo:

Check out the demo

-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;
-webkit-animation-name:rotate;
-webkit-animation-iteration-count: infinite;

-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-moz-animation-name:rotate;
-moz-animation-iteration-count: infinite;

-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-ms-animation-name:rotate;
-ms-animation-iteration-count: infinite;

-o-animation-duration: 4s;
-o-animation-timing-function: linear;
-o-animation-name:rotate;
-o-animation-iteration-count: infinite;

animation-duration: 4s;
animation-timing-function: linear;
animation-name:rotate;
animation-iteration-count: infinite;

Make sure the non-prefixed properties are always placed after the vendor-specific ones for proper functionality.

P.S: If you're not familiar with it, there are tools available that can automatically add prefixes to your code before compiling (such as Prefixr) or even during runtime (like prefix-free).

By the way, I really like your animation, great job! :)

Issues with CSS3 keyframe animations failing to function in Firefox and IE

Answer №1

Similar questions

Efficiently reducing the size of a CSS selector string with javascript

The Struggle with Bootstrap Accordion

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

Guidelines for organizing multiple checkboxes in a grid format

What could be the reason behind my table appearing all crammed up in a single

Can you adjust the size of a container based on a breakpoint using a class name in Bootstrap 5?

How can I adjust two overlapping divs for proper display?

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

Having trouble figuring out how to load images into a div based on the current page location?

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

As I go through the database, I notice that my div model functions correctly for the initial record but does not work for any subsequent ones

What are the limitations preventing C++ applications from generating interfaces similar to those of PHP, HTML, and CSS?

The collapse menu toggle feature seems to be malfunctioning, as it is not functioning properly

Creating responsive lines with CSS on top of an image

Neglecting to review the CSS - embracing ejs layouts in Express

"Exploring the world of Reactstrap: A

The jQuery attr() method is universally compatible across platforms and stands independent

Leveraging the power of Bootstrap 4 to place the footer beneath all remaining content on the

Is it possible to have a variable number of dynamic CSS Grid columns with the option of including a header or footer

Only add table heading if there is available space, but refrain from doing so if it will disrupt the layout