Свойство функции времени анимации CSS3 не применяется

У меня есть простая задача анимации. Я применил ключевые кадры для определения анимации и предоставил ссылку для этого ключевого кадра на элементы, где мне нужно, чтобы они применялись с помощью селекторов.

Анимация работает, но не использует функцию синхронизации, которую я предоставил. Вместо этого он принимает «легкость» по умолчанию.

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

Пример — JSFddle


html css-animations jsfiddle
person Mahesh    schedule 09.11.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Во-первых, это -webkit-animation-timing-function:, а не -webkit-transition-timing-function, потому что вы работаете с анимацией.

Во-вторых, функция синхронизации перезаписывается из-за ошибки -webkit-animation:AA_Anim 1.5s;. Использование сокращенной версии (только 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;
}

Обновленная демонстрация

person Zach Saucier    schedule 09.11.2013