CSS3 Animation - Infinite Hover Arrow

Question

Я пытаюсь анимировать фоновое изображение, чтобы при бесконечной зависании ссылки (до тех пор, пока вы зависали над ссылкой) будет перемещаться между 905 и 100%. Я создал JSFiddle, чтобы играть, но на самом деле он не переходит в какую-либо анимацию, а вместо этого просто перемещает фон. JSFiddle

CSS

a{display: block; background: url('thin-right-arrow.png') no-repeat right center; widht: 100%:} 

a     {background-position: 90% center;} 

a:hover  {background-position: 100% center; -webkit-animation: animatedBackground 40s linear infinite;} 

@keyframes animatedBackground { 
    from { background-position: 90% center; } 
    to { background-position: 100% center; } 
} 

Answer 1

Вам необходимо @-webkit-keyframes animate для анимации для работы в -webkit браузерах.

_{Примечание, я не добавили другие производителей, так что это будет только работы в -webkit браузерах.}

Там нет необходимости для JS/JQuery, если вы хотите, чтобы анимация длиться пока зависший над ссылкой (example). Тем не менее, если вы хотите, чтобы анимация начать при наведении на ссылку, а затем идти бесконечно, здесь на основе JQuery решение: jsFiddle example

JQuery:

$('a').hover(function(){ 
    $(this).addClass('animate'); 
}); 

CSS:

.animate { 
    background-position: 90% center; 
    -webkit-animation: animate 4s infinite; 
} 
@-webkit-keyframes animate { 
    50% { 
     background-position: 100% center; 
    } 
} 

Answer 2

Во-первых, ваша анимация очень медленная на 40 секунд. Во-вторых, вам нужно включить все префиксные версии ключевых фреймов. Вы просто забыли -webkit ключевых кадров.

Примечание: Нет необходимости в JQuery/JavaScript

Если вы хотите, чтобы стрелка вернуться ровно через не-зависание просто добавить transition и его поставщик приставкой приятелей

Edit: Кажется, что вы хотите, гладкие назад и вперед, когда они парят, а не только гладкие, непрерывные в одном направлении. То же самое точное понятие просто изменить ключевые кадры:

Демо: jsFiddle

a { 
    background-position: 90% center; 

    -webkit-transition: background-position 0.3s linear; /* Chrome 1-25, Safari 3.2+ */ 
    -moz-transition: background-position 0.3s linear; /* Firefox 4-15 */ 
    -o-transition: background-position 0.3s linear; /* Opera 10.50–12.00 */ 
    transition: background-position 0.3s linear; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ 
} 

a:hover { 
    background-position: 100% center; 

    -moz-animation: animatedBackground 2s infinite linear; 
    -o-animation: animatedBackground 2s infinite linear; 
    -webkit-animation: animatedBackground 2s infinite linear; 
    animation: animatedBackground 2s infinite linear; 
} 

@-moz-keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    50% { 
     background-position: 100% center; 
    } 
    100% { 
     background-position: 90% center; 
    } 
} 
@-webkit-keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    50% { 
     background-position: 100% center; 
    } 
    100% { 
     background-position: 90% center; 
    } 
} 
@-o-keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    50% { 
     background-position: 100% center; 
    } 
    100% { 
     background-position: 90% center; 
    } 
} 
@-ms-keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    50% { 
     background-position: 100% center; 
    } 
    100% { 
     background-position: 90% center; 
    } 
} 
@keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    50% { 
     background-position: 100% center; 
    } 
    100% { 
     background-position: 90% center; 
    } 
} 

Вот непрерывный (справа от) версии стрелки:

Демо: jsFiddle

a { 
    background-position: 90% center; 

    -webkit-transition: background-position 0.3s linear; /* Chrome 1-25, Safari 3.2+ */ 
    -moz-transition: background-position 0.3s linear; /* Firefox 4-15 */ 
    -o-transition: background-position 0.3s linear; /* Opera 10.50–12.00 */ 
    transition: background-position 0.3s linear; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */ 
} 

a:hover { 
    background-position: 100% center; 

    -moz-animation: animatedBackground 2s infinite linear; 
    -o-animation: animatedBackground 2s infinite linear; 
    -webkit-animation: animatedBackground 2s infinite linear; 
    animation: animatedBackground 2s infinite linear; 
} 

@-moz-keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    100% { 
     background-position: 100% center; 
    } 
} 
@-webkit-keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    100% { 
     background-position: 100% center; 
    } 
} 
@-o-keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    100% { 
     background-position: 100% center; 
    } 
} 
@-ms-keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    100% { 
     background-position: 100% center; 
    } 
} 
@keyframes animatedBackground { 
    0% { 
     background-position: 90% center; 
    } 
    100% { 
     background-position: 100% center; 
    } 
}