Using transform to scale in Firefox animations does not function properly

Question

Using transform to scale in Firefox animations does not function properly

I'm currently experimenting with a slider to apply the "transform: scale(x,x)" css3 animation specifically in Firefox. Interestingly, when I disable the animation, the slider and scaling functions properly. However, once I enable the animation, it animates but the scaling aspect doesn't seem to work.

Take a look at this jsfiddle... If you remove the comments at the end of the CSS section, you can observe the issue. I aim for both the arrows to spin AND scale simultaneously.

(Exclusive to FIREFOX, for Chrome/Safari check the following link): http://jsfiddle.net/G6rYu/

$("#slider-step").on("change", function(e){
    scale= $("#slider-step").val() / 100;

    $(".elem.A").css("transform", "scale("+scale+","+scale+")");
    $(".elem.B").css("transform", "scale("+(1-scale)+","+(1-scale)+")");
});

and...

.elem.A {  
    background-image:url('http://s24.postimg.org/ua9mzwmht/arrow.png');

    animation-name: rotate; 
    animation-duration: 3.0s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
 }
 @keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);} 
}

Here's the intended effect (functional in Chrome/Safari only): http://jsfiddle.net/nick2ny/4mLkU/

jquery jquery-ui css firefox transform

Answer 1

Answer №1

To ensure compatibility across different browsers, you need to specify the CSS properties for each specific browser engine. For WebKit browsers, use:

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

For Firefox, which does not use the WebKit engine, you should target it using the -moz prefix like this:

/* Target Firefox: */
-moz-animation-name: rotate; 
-moz-animation-duration: 3.0s; 
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

/* Target Webkit: */
-webkit-animation-name: rotate; 
-webkit-animation-duration: 3.0s; 
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

/* Target W3C Browsers: */
animation-name: rotate; 
animation-duration: 3.0s; 
animation-iteration-count: infinite;
animation-timing-function: linear;

Answer 2

To ensure compatibility across different browsers, you need to specify the CSS properties for each specific browser engine. For WebKit browsers, use:

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

For Firefox, which does not use the WebKit engine, you should target it using the -moz prefix like this:

/* Target Firefox: */
-moz-animation-name: rotate; 
-moz-animation-duration: 3.0s; 
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

/* Target Webkit: */
-webkit-animation-name: rotate; 
-webkit-animation-duration: 3.0s; 
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

/* Target W3C Browsers: */
animation-name: rotate; 
animation-duration: 3.0s; 
animation-iteration-count: infinite;
animation-timing-function: linear;

Answer 3

Answer №2

It appears that there may be a conflict arising from applying the transform property twice to your .elem elements. The transformation defined by transform: rotate() seems to override the one set by transform: scale(). To resolve this, consider wrapping the scale transformation around the element and then applying the animation to the inner element instead.

It seems like you are utilizing the zoom property in Chrome, which could explain why the effect is working as expected in that browser.

You can view an example on this fiddle: http://jsfiddle.net/G6rYu/5/ (compatible with Firefox and Chrome)

<div class="wrap">
    <div class="box A">
        <div class="elem A"></div>
    </div>
</div>
<div class="wrap">
    <div class="box B">
        <div class="elem B"></div>
    </div>
</div>

CSS

.wrap {
    width: 175px;
    height: 175px;
    overflow: hidden;
}
.box.A {
    width:175px;
    /* border:1px blue solid; */
}
.box.B {
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height: 175px;
    width:175px;
    /* border:1px blue solid; */
}
.elem {
    width:175px;
    height:175px;
    /* border:1px red solid; */
    background-repeat: no-repeat;
}
.elem.A {
    background-image:url('http://s24.postimg.org/ua9mzwmht/arrow.png');
}
.box.A {
    animation-name: rotate;
    animation-duration: 3.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
.elem.B {
    background-image:url('http://s29.postimg.org/np8utnv8j/arrow2.png');
}
.box.B {
    animation-name: rotate2;
    animation-duration: 3.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Answer 4

It appears that there may be a conflict arising from applying the transform property twice to your .elem elements. The transformation defined by transform: rotate() seems to override the one set by transform: scale(). To resolve this, consider wrapping the scale transformation around the element and then applying the animation to the inner element instead.

It seems like you are utilizing the zoom property in Chrome, which could explain why the effect is working as expected in that browser.

You can view an example on this fiddle: http://jsfiddle.net/G6rYu/5/ (compatible with Firefox and Chrome)

<div class="wrap">
    <div class="box A">
        <div class="elem A"></div>
    </div>
</div>
<div class="wrap">
    <div class="box B">
        <div class="elem B"></div>
    </div>
</div>

CSS

.wrap {
    width: 175px;
    height: 175px;
    overflow: hidden;
}
.box.A {
    width:175px;
    /* border:1px blue solid; */
}
.box.B {
    position:relative;
    top:0px;
    left:0px;
    float:left;
    height: 175px;
    width:175px;
    /* border:1px blue solid; */
}
.elem {
    width:175px;
    height:175px;
    /* border:1px red solid; */
    background-repeat: no-repeat;
}
.elem.A {
    background-image:url('http://s24.postimg.org/ua9mzwmht/arrow.png');
}
.box.A {
    animation-name: rotate;
    animation-duration: 3.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
.elem.B {
    background-image:url('http://s29.postimg.org/np8utnv8j/arrow2.png');
}
.box.B {
    animation-name: rotate2;
    animation-duration: 3.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Using transform to scale in Firefox animations does not function properly

Answer №1

Answer №2

Similar questions

Having trouble with my jQuery .hover() code not running as expected

JQuery form serialize not triggering in Internet Explorer

Content positioned beside an image with the help of Bootstrap 4 framework

Searching for a specific value in an array with jQuery: A step-by-step guide

What is the best way to horizontally align and center the navigation menu?

I would greatly appreciate any recommendations for a library to simulate ajax requests within a web browser

What is the best way to showcase custom DataTable filters that are perfectly aligned with each other?

How can I make a div element match the height of an image and overflow without relying on

Utilizing Reactstrap to design a customized vertical login page and NavBar with a unique background and text color scheme

Arrangement of Divs in Mobile Design - Utilizing Bootstrap 4 Rows and Columns

Is there a way to prevent the ENTER key on the keyboard from interacting with

Tips for making markers act responsively

Embed a Link Fill Script into an Input Form

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

Can an iFrame be programmed to automatically scroll?

What is the method for obtaining a unique id that changes dynamically?

How can you continuously calculate and show the total quantity of items in a list?

Is it possible to prevent an iFrame from loading its src until a certain function is triggered?

Server vs Client-Side: Loading Dynamic HTML

Only pay attention to the localStorage.removeItem() event