Как активировать анимацию CSS3 (webkit) с помощью javascript?

Im действительно застрял. Я хочу, чтобы анимация CSS, которую я создал (ниже), активировалась при нажатии на div. Единственный способ, с помощью которого я мог это сделать, - использовать javascript для создания события onClick. Однако я не знаю, как запустить/refrence анимацию, которая находится в моем файле css. Может кто-нибудь мне помочь?Как активировать анимацию CSS3 (webkit) с помощью javascript?

Это анимация в моем файле css, которую я хочу запустить, нажав на div.

@-webkit-keyframes colorchange { 
0% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
33% { 
    background-color: blue; 
    opacity: 0.75; 
    -webkit-transform: scale(1.1) rotate(-5deg); 
} 
67% { 
    background-color: green; 
    opacity: 0.5; 
    -webkit-transform: scale(1.1) rotate(5deg); 
} 
100% { 
    background-color: red; 
    opacity: 1.0; 
    -webkit-transform: scale(1.0) rotate(0deg); 
} 
}

Я даже попытался положить CSS в том же файле, как JavaScript (index.html) и использовать следующий код, чтобы попытаться активировать его по щелчку, но не повезло.

<script> 
function colorchange(test) 
{ 
test.style.webkitAnimationName = 'colorchange '; 
} 
</script>

Пожалуйста, помогите :)

источник

2010-12-05 user531192

Вы недостающую длительность и у вас есть замыкающий пробел в имени присвоенным:

function colorchange(test) 
{ 
    test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed 
    test.style.webkitAnimationDuration = '4s'; 
}

Некоторые более подробная информация о @-webkit-keyframes:
http://webkit.org/blog/324/css-animation-2/

обновление

Некоторые рабочие коды.

<html> 
    <head> 
    <style> 
    @-webkit-keyframes colorchange { 
    0% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    33% { 
     background-color: blue; 
     opacity: 0.75; 
     -webkit-transform: scale(1.1) rotate(-5deg); 
    } 
    67% { 
     background-color: green; 
     opacity: 0.5; 
     -webkit-transform: scale(1.1) rotate(5deg); 
    } 
    100% { 
     background-color: red; 
     opacity: 1.0; 
     -webkit-transform: scale(1.0) rotate(0deg); 
    } 
    } 
    </style> 

    <script> 
    function colorchange(e) { 
     if (e.style.webkitAnimationName !== 'colorchange') { 
      e.style.webkitAnimationName = 'colorchange'; 
      e.style.webkitAnimationDuration = '4s'; 

      // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect 
      setTimeout(function() { 
       e.style.webkitAnimationName = ''; 
      }, 4000); 
     } 
    } 
    </script> 
    </head> 

    <body> 
     <div onclick="colorchange(this)">Hello World!</div> 
    </body> 
</html>

источник

2010-12-05 13:15:13

Спасибо за это, я не видел конечного пространства. Но у меня все еще есть проблема. если я это сделаю, например: test.style.height = "50px"; он будет оживлять и работать, однако, если я попробую назвать пользовательскую анимацию, которую я предопределл, сделав это: test.style.webkitAnimationName = 'colorchange'; ничего не работает. Есть идеи по этому поводу? – user531192

Установили ли вы продолжительность? Без него это не сработает. Я тестировал материал локально с вашим CSS выше, и он работал. –

Да, у меня есть продолжительность, и анимация работает нормально, если я назначу ее на css-зависанию. Но я просто не могу заставить его работать, когда я пытаюсь использовать javascript onclick, чтобы заставить его играть. (работает onclick). Вы получили его с помощью onclick? – user531192

Как активировать анимацию CSS3 (webkit) с помощью javascript?

ответ

Смежные вопросы