CODEWITHSUNDEEP
htmljsfiddlecss-animations
Mahesh
Mahesh

Reputation: 3997

CSS3 animation-timing-function property is not getting applied

I have a simple animation task. I have applied keyframes to define animation and provided the reference for this keyframe to elements where I need them to be applied using selectors.

Animation is working but it is not taking the timing function that I have provided. Instead it takes the default "ease". 

div {
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
    width:100px;
    color:white;
    font-weight:bold;
    /*-webkit-transition-timing-function: cubic-bezier(0.5, 1, 0.25, 1);*/
    -webkit-transition-timing-function: linear;
}
.div1, .div2 {
    -webkit-animation:AA_Anim 1.5s;
    position:relative;
}

@-webkit-keyframes AA_Anim {
    from {
        left:300px;
    }
    to {
        left:0px;
    }
}

Sample - JSFddle

Upvotes: 2

Views: 2038

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25974

First off, it's -webkit-animation-timing-function:, not -webkit-transition-timing-function because you're working with animations

Secondly, the timing function is being overwritten because of the -webkit-animation:AA_Anim 1.5s;. Using the shorthand version (just animation) uses the given values and assumes the defaults for the rest. As a result, you must either put the timing function in each -webkit-animation instead or use animation-name and animation-duration instead. The second way would look as follows:

div {
    ...
    -webkit-animation-timing-function: cubic-bezier(0.5, 1, 0.25, 1);
}
.div1 > div, .div2 > div {
    position:relative;
    -webkit-animation-name:AA_Anim;
    -webkit-animation-duration:2.5s;
}
.div1, .div2 {
    -webkit-animation-name:AA_Anim;
    -webkit-animation-duration:1.5s;
    position:relative;
}

Updated Demo

Upvotes: 4

Related Questions