анимация ключевых кадров: сдвиньте и поверните

Question

анимация ключевых кадров: сдвиньте и поверните

0

Я пытаюсь скользить в каком-то тексте и создавать "эффект отскока", как будто он бьет стену, прежде чем оседать в положении.

Однако всякий раз, когда я добавляю поворот, он вращает движение WHILST, а не когда он достиг определенной точки.

В заключение - я хочу, чтобы div вращался ОДИННА, он попадает -30px, затем возвращается назад, чтобы не вращаться, а затем двигаться в другую сторону, прежде чем оседать на месте.

Вот мой текущий CSS...

@-webkit-keyframes slide {
from {right: 1500px ; -webkit-transform: rotate(0deg)} 
50% {right: -30px, ; -webkit-transform:rotate(5deg)} 
75% { right: 20px} 
to {right: 0px}
}

div {
-webkit-animation: slide 5s;
}

DJC 15 апр. 2014, в 01:36

Источник

0

Вы смотрели на количество итераций анимации и направление анимации?
G-Cyr 14 апр. 2014, в 23:25

Теги:

html

css

html5

css3

1 ответ

Ещё вопросы

Вы смотрели на количество итераций анимации и направление анимации?

George Chanturidze · Accepted Answer · 2014-04-14T21-49-00.000Z

переход от одной точки к другой, анимация осуществляется постепенно. Если вы хотите, чтобы он начинался с 50%, вам нужно явно указать 0 градусов на 50% и на 5 градусов позже, а затем снова на 0 градусов в более поздней точке. Это должно быть то, что вы ищете:

@-webkit-keyframes slide {
0% {right: 1500px;} 
50% {right: -30px; -webkit-transform:rotate(0deg)} 
55% {right: -30px; -webkit-transform:rotate(5deg)}
65% {right: -30px; -webkit-transform:rotate(0deg)}
75% { right: 20px} 
100% {right: 0px}
}

div {
-webkit-animation: slide 5s;
}

Обратите внимание, что я указал "правильно: -30px;" три раза. В противном случае анимация переместилась бы к вашему следующему заданному значению и начала реализацию этой анимации, которая положительная 20px.