Как я могу реализовать качающуюся анимацию, используя CSS в WebKit?

Question

Эй
Я ищу способ заставить мое изображение вращаться на ~ 50 градусов, сделать паузу на короткое время (> секунду), повернуть другой путь на ~ -50 градусов, а затем вернуться к исходной точке. И повтори.

У меня проблемы с указанием повернуть назад. Любая помощь была бы очень хороша.

Ahuge

Answer 1

Анимация в webkit может быть довольно простой.Сначала вы объявляете эффект анимации, используя @-webkit-keyframes rule:

@-webkit-keyframes swing {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

Webkit использует технику анимации, называемую ключевыми кадрами.Если вы знакомы с Flash или 3D-анимацией, вы будете знать, что это такое.По сути, вы устанавливаете определенные позиции для своего элемента в серии «ключевых кадров», и в зависимости от настроек, которые вы объявляете с другим набором правил, он будет плавно «анимировать» элемент между установленными вами ключевыми кадрами.

Хорошо, поэтому, как только мы определили анимацию, мы применяем ее, используя -webkit-animation-name и связанные с ней свойства.

div {
 -webkit-animation-name: swing;
 -webkit-animation-duration: 6s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

Это прикрепляет анимацию bounce, говорит ей "играть" для6 секунд десять раз и заставляет каждую другую анимацию воспроизводиться в обратном порядке.

Ключевые кадры указываются с использованием процентных значений, «from» эквивалентно 0%, а «to» такое же, как 100%.

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

Вот пример для вас , хотя он не будет анимирован, если вы не используете ночную сборку.

Я бы предложил использовать решение jQuery, если вы хотитебольше вашей пользовательской базы, чтобы увидеть эту анимацию.