CODEWITHSUNDEEP
csscss-transitions
user1547359
user1547359

Reputation: 33

-webkit-transition-timing-function doesn't have any effect in Chrome

No matter what I set the -webkit-transition-timing-function I always get the default ease behavior. I have tried all the options and need the linear, but Chrome ignores the setting. FF and Safari do work as expected...

http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

 .boxOverGlow
    {
        width: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
        display: block;
        z-index: 28;
        opacity: 0;
        filter: alpha(opacity=0);


        transition-timing-function: linear;
    -moz-transition-timing-function: linear; /* Firefox 4 */

    -o-transition-timing-function: linear; /* Opera */

     transition:opacity 1s;
    -moz-transition:opacity 1s; /* Firefox 4 */
    -webkit-transition:opacity 1s; /* Safari and Chrome */
    -o-transition:opacity 1s; /* Opera */

     -webkit-transform-style: preserve-3d;
          -webkit-transition-timing-function: linear; /* Safari and Chrome */


    }

Upvotes: 1

Views: 1086

Answers (1)

Rohit416
Rohit416

Reputation: 3486

when you are changing the behavior, also change it for the default line i.e,

 transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;

and these transitions are woking in my google chrome(20.0.1132).

you are using

-webkit-transform-style:preserve-3d

it is for the transfomation of elements which is totally different from transitions. try removing that line. according to what i understood from your question, i don't its necessary there. :)

Upvotes: 1

Related Questions