使用Javascript激活CSS3动画

Question

I was playing around with some CSS animations and I'm trying to trigger the animations using a Javascript onclick. Noting seems to be working for me.

http://codepen.io/Quinn1011/pen/Eltpk

Could someone please take a look and help me out. I can't even get "next" div to hide on pageload.

Answer 1

add the following line to the css of #next :

display:none 

wow , that was easy, now the next show´s up on click and not on load.

.show() is nothing else than removing the css property display:none. just like .hide() is adding display:none to the element

if you understood that, it will be easy for you to understand that your animations are running on load because the css has already been set

so on click add the suiting classes to your elements

http://api.jquery.com/addClass/

ah sorry, that would be the jquery-solution, if you´re not using jQuery and you didn´t mention it, heres the pure way :

function changeClass (elementID, newClass) {
var element = document.getElementById(elementID);

element.setAttribute("class", newClass); 
}

you can call this function like:

$('#button').click(function(){
  changeClass('next','anmimate');
 });