Анимация ключевого кадра CSS3, которая запускается при наведении

Я пытаюсь сделать небольшую анимацию ключевого кадра.

Когда пользователь наводит курсор на кнопку, я хочу, чтобы фоновое изображение немного смещалось вправо, а затем обратно. Итак, небольшое движение «отскока».

В моем первом примере я использовал простое наведение в CSS, которое изменило положение фона с 91% до 93%, что приводит к движению при наведении.

Однако, когда я попытался сделать что-то подобное, чтобы использовать анимацию ключевого кадра под названием nextarrow, анимация не запускается.

Вот JSFiddle, показывающий мой рабочий пример (button-one) и мой нерабочий пример (button-two)

Где я ошибся?

http://jsfiddle.net/franhaselden/Lfmegdn5/

.button-two.next:hover{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}

css css-animations keyframe
person Francesca    schedule 05.02.2015    source источник
comment
вы хотите точно такой же результат, как кнопка 1?   -  person Naeem Shaikh    schedule 05.02.2015
comment
Вы добавили все необходимые версии браузера с префиксом для @keyframes (например, @-webkit-keyframes)? Добавление этого делает его работающим для меня.   -  person Harry    schedule 05.02.2015
comment
@NaeemShaikh не совсем то же самое. Как написано в моем посте (и как видно на ключевых кадрах), я бы хотел, чтобы фоновая графика переместилась на 93%, а затем обратно на 91%. Аналогично, но не то же самое, что и первая кнопка.   -  person Francesca    schedule 05.02.2015
comment
Он отлично работает для браузера Chromium, я думаю, что @Harry прав   -  person maskacovnik    schedule 05.02.2015
comment
Хотя я еще не проголосовал за закрытие. Вероятно, это дубликат stackoverflow.com/questions/25110510/   -  person Harry    schedule 05.02.2015
comment
Я удалил свой ответ. Это является дубликатом.   -  person The Pragmatick    schedule 05.02.2015

Ответы (2)


arrow_upward
8
arrow_downward

В качестве альтернативы ответу @jbutler483 используйте Без префикса: освободитесь от ада префиксов поставщиков CSS!

.button.next{padding:5% 20%;background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png);background-repeat: no-repeat;background-position: 91% center;}

.button-one.next:hover{background-position: 98% center;}

.button-two.next:hover{
   animation: nextarrow 1s infinite;
}

@keyframes nextarrow {
  0%,100% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Simple hover version<br /><br />
<input type="submit" value="Next question" class="button button-one green next" />
<br /><br /><br /><br />
Bounce animation version<br /><br />
<input type="submit" value="Next question" class="button button-two green next">

Примечание. Вы можете комбинировать 0 % и 100 %, поскольку они одинаковы:

от

@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}

to

@keyframes nextarrow {
  0%,100% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}

или к этому

@keyframes nextarrow {
  from,to {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
}
person Gildas.Tambo    schedule 05.02.2015

arrow_upward
5
arrow_downward

Вам также необходимо добавить префикс к ключевым кадрам:

ДЕМО

@-webkit-keyframes nextarrow{ keyframe definition here}
@-moz-keyframes nextarrow{ keyframe definition here}
@-o-keyframes nextarrow{ keyframe definition here}
@keyframes nextarrow{ keyframe definition here}

Например

.button.next{padding:5% 20%;background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png);background-repeat: no-repeat;background-position: 91% center;}

.button-one.next:hover{background-position: 98% center;}

.button-two.next:hover{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

@-webkit-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@-o-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@-moz-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
Simple hover version<br /><br />
<input type="submit" value="Next question" class="button button-one green next" />
<br /><br /><br /><br />
Bounce animation version<br /><br />
<input type="submit" value="Next question" class="button button-two green next">

person jbutler483    schedule 05.02.2015