анимация CSS3 ведет себя неожиданно

Я работаю над анимацией шара, катящегося и падающего с края. Во-первых, я сделал версию, которая просто катится, а затем останавливается. Работает нормально. Но тогда, когда я добавил падающую анимацию к тому же коду, он не откатывает ее, и я ничего не могу с этим поделать. Вот первый фрагмент:анимация CSS3 ведет себя неожиданно

@-webkit-keyframes roll{ 
    0% { 
     -webkit-animation-timing-function: ease-in; 
     -webkit-transform: translateX(0px) rotate(0deg); 
    } 
    100% { 
     -webkit-transform: translateX(480px) rotate(360deg); 
    } 
}

затем второй:

@-webkit-keyframes rollandfall{ 
0% { 
    -webkit-animation-timing-function: ease-in; 
    -webkit-transform: translateX(0px) rotate(0deg); 
} 
50% { 
    -webkit-transform: translateX(480px) rotate(360deg); 
} 
85% { 
    -webkit-animation-timing-function: ease-in; 
    -webkit-transform: translate(480px, 400px) rotate(360deg); 
} 
95% { 
    animation-timing-function: ease-out; 
    -webkit-transform: translate(480px, 380px); 
} 
100% { 
    animation-timing-function: ease-in; 
    -webkit-transform: translate(480px, 400px); 
} 
}

(я знаю, что это только для сафари и хром, но я хочу, чтобы закончить его, прежде чем сделать его доступным в любом браузере) И here - это ссылка на анимацию.

Спасибо за помощь!

EDIT: Кажется, это было не совсем ясно, что я хочу, чтобы это сделать, так here вы можете проверить, что делает первый фрагмент.

источник

2013-12-04 Attila Herbert

Он работает для меня на последнем хроме на osx mavericks. –

Я использую Safari, на тех же os, и он не работает для меня. Я попробую хром. Как это возможно? –

Wierd дерьмо, работает для меня и в сафари. Это когда он парит мяч, он должен работать правильно? У вас нет какой-то проблемы с кешированием? –

Лучший способ, кажется, 'цепь' анимации:

#goRight img:hover{ 
    -webkit-animation: roll 1s, fall 1s; 
    -webkit-animation-delay: 0s, 1s; 
    -webkit-animation-fill-mode: forwards; 
} 
@-webkit-keyframes roll{ 
    0% { 
     -webkit-animation-timing-function: ease-in; 
     -webkit-transform: translateX(0px) rotate(0deg); 
    } 
    100% { 
     -webkit-transform: translateX(480px) rotate(360deg); 
    } 
} 

@-webkit-keyframes fall{ 
    0% { 
     -webkit-animation-timing-function: ease-in; 
     -webkit-transform: translateX(480px); 
    } 
    100% { 
     -webkit-transform: translateX(480px) translateY(400px); 
    } 
}

Намного чище!

источник

2013-12-04 21:41:16 fguchelaar

Ну, это работает ... Так что спасибо! Но мне любопытно, что я сделал неправильно в оригинальной версии. –

отказ от ответственности: я не эксперт в CSS3, но после некоторой настройки, похоже, это работает ... ish.

@-webkit-keyframes rollandfall{ 
    0% { 
     -webkit-animation-timing-function: ease-in; 
     -webkit-transform: translateX(0px) rotate(0deg); 
    } 
    5% { 
     -webkit-animation-timing-function: ease-in; 
     -webkit-transform: translateX(48px) rotate(36deg); 
    } 
    25% { 
     -webkit-animation-timing-function: ease-in; 
     -webkit-transform: translateX(240px) rotate(180deg); 
    } 
    30% { 
     -webkit-animation-timing-function: ease-in; 
     -webkit-transform: translateX(284px) rotate(216deg); 
    } 
    50% { 
     -webkit-animation-timing-function: ease-in; 
     -webkit-transform: translateX(480px) rotate(360deg); 
    } 
    100% { 
     animation-timing-function: ease-in; 
     -webkit-transform: translate(480px, 400px) rotate(360deg); 
    } 
}

Я создал несколько небольших приращений, чтобы сообщить двигателю, что он должен анимироваться в определенном направлении; если вы положите половину пути на 180 градусов, он, похоже, катится в противоположном направлении.

Нуждается в некоторой настройке для более плавной анимации, возможно.

источник

2013-12-04 21:18:16 fguchelaar

Eww, это то, чего я пытался избежать. Я понимаю, что это работает, но я хочу знать, что я делаю неправильно в этом. –

анимация CSS3 ведет себя неожиданно

ответ

Смежные вопросы