CODEWITHSUNDEEP
cssmatrix
user2869299
user2869299

Reputation: 83

CSS Matrix animation issue

I've tried to create some matrices animation lately. But I noticed something weird. The following code works differently on Firefox, Safari and Chrome :

@-moz-keyframes matrix
{
    from 
    { 
       -moz-transform: matrix(-1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
    }

    to 
    { 
       -moz-transform: matrix(1.0, 2.0, 3.0, 1.0, 0.0, 12.0);
    }
}

@-webkit-keyframes matrix
{
    from 
    { 
        -webkit-transform: matrix(-1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
    }

    to 
    { 
        -webkit-transform: matrix(1.0, 2.0, 3.0, 1.0, 0.0, 12.0);
    }
}

Is there a way to fix this problem ?

Upvotes: 8

Views: 607

Answers (1)

Jace Cotton
Jace Cotton

Reputation: 2014

It seems to be just a difference in the way Gecko and Webkit renders the matrix function, which is why they still have the experimental vendor prefixes. I say there is no clean cut way of "fixing" this issue, as it is entirely up to the rendering engine, so you may just have to tinker with the values to get equivalent results.

Upvotes: 2

Related Questions