CSS3 animation-timing-function 속성이 적용되지 않습니다.

Question

간단한 애니메이션 작업이 있습니다. 키 프레임을 적용하여 애니메이션을 정의하고이 키 프레임에 대한 참조를 선택기를 사용하여 적용해야하는 요소에 제공했습니다.

애니메이션이 작동하지만을 제공 한 타이밍 기능을 사용하지 않는 것이 입니다. 대신 기본 "쉽게"걸립니다.

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; 
    } 
} 

샘플 - 당신이

이 두 번째로, 타이밍 기능이 있기 때문에 -webkit-animation:AA_Anim 1.5s;의 덮어 쓰기되는 애니메이션 작업을하고 있기 때문에 JSFddle

Answer 1

첫째로, 그것은 -webkit-animation-timing-function:하지 -webkit-transition-timing-function입니다. 속기 버전 (단지 animation)을 사용하면 주어진 값을 사용하고 나머지는 기본값으로 가정합니다. 결과적으로 각 -webkit-animation에 타이밍 기능을 넣거나 대신 animation-name 및 animation-duration을 사용해야합니다. 로 보일 것이다 두 번째 방법은 다음과 같습니다

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