Как начать анимацию css в моем случае?

Question

Я пытаюсь использовать javascript для запуска анимации css в моем приложении.

У меня есть что-то вроде этого.

#ball{ 
position:absolute; 
animation-name:myfirst; 
animation-duration:5s; 
animation-timing-function:linear; 

animation-iteration-count:infinite; 
animation-direction:alternate; 
animation-play-state:running; 
/* Safari and Chrome: */ 
-webkit-animation-name:myfirst; 
-webkit-animation-duration:2s; 
-webkit-animation-timing-function:linear; 

-webkit-animation-iteration-count:1; 
-webkit-animation-direction:default; 
-webkit-animation-play-state:running; 
} 


.stage2{ 
position:absolute; 
animation-name:mySecond; 
animation-duration:5s; 
animation-timing-function:linear; 

animation-iteration-count:infinite; 
animation-direction:alternate; 
animation-play-state:running; 
/* Safari and Chrome: */ 
-webkit-animation-name:myfirst; 
-webkit-animation-duration:2s; 
-webkit-animation-timing-function:linear; 

-webkit-animation-iteration-count:1; 
-webkit-animation-direction:default; 
-webkit-animation-play-state:running; 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {left:2%; top:47%;} 
20% {left:16%; top:47%;} 
40% {left:16%; top:58%;} 
60% {left:-10%; top:58%;} 
80% {left:-10%; top:67%;} 
100% {left:12%; top:67%;} 
} 

@-webkit-keyframes mySecond /* Safari and Chrome */ 
{ 
0% {background:red; left:2%; top:25%;} 
20% {background:yellow; left:16%; top:25%;} 
40% {background:blue; left:16%; top:35%;} 
60% {background:green; left:0; top:35%;} 
80% {background:red; left:0; top:45%;} 
100% {background:red; left:12%; top:45%;} 
} 

HTML

<img id='ball' src='test.png' /> 
<a href='#' >click </a> 

Я хочу, чтобы мой IMG начать новую анимацию, когда пользователь нажимает на кнопку.

JS

$('#ball').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd  
    msanimationend',function(){ 
      //first animation ended // works perfect 
      $(this).hide() 
}) 

$('a').on('click', function(){ 
    $('#ball').show().addClass('stage2') 
}) 

Это не похоже на работу. Может ли кто-нибудь мне помочь? Большое спасибо!

Answer 1

Если приведенный выше сценарий является копией того, что у вас есть, тогда возникает синтаксическая ошибка, связанная с завершением строки. У вас есть разрыв строки после oAnimationEnd без правильного завершения строки.

Другие, чем это выглядит тонкой

jQuery(function() { 
    $('#ball').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd msanimationend', function() { 
     //first animation ended // works perfect 
     $(this).hide() 
    }) 

    $('a').on('click', function() { 
     $('#ball').show().addClass('stage2') 
    }) 
}) 

Demo: Fiddle

Answer 2

Это был вопрос CSS. Элемент .stage2 имел следующее свойство:

-webkit-animation-name:myfirst; 

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

Оно должно быть:

-webkit-animation-name:mySecond; 

Кроме того, это лучше использовать анимацию стенографии:

#ball { 
    position:absolute; 
    padding:10px; 
    -webkit-animation:myfirst 2s linear 1; 
} 
#ball.stage2 { 
    -webkit-animation:mySecond 2s linear 1; 
} 

(. Вы должны также добавить префиксы и @keyframes для отличных -webkit браузеров)

Помимо этих ошибок, также существовал конфликт специфичности, поскольку первая анимация играла бесконечно и перезаписывала s econd анимация, когда класс был добавлен. Я исправил это, добавив id ко второму селектору, #ball.stage2 - тем самым делая его более конкретным. Это будет теперь заставляет его перезаписывать первую анимацию при добавлении класса.

Также, как Arun P Johny points out, был также разрыв строки в jQuery. Удалите это и исправьте проблемы JS, и он должен работать.

UPDATED EXAMPLE HERE - (-webkit только - я не добавил другие префиксы)

Вы можете сказать, второй работает анимация, поскольку цвет фона в настоящее время меняется.