html - CSS3 Keyframe transition alternate onclick issue -

See jsfiddle here:

Click me for "button. Slide the first click the box down, second slide it up. Why is not any idea doing this?

  & lt; Div id = "slider" class = "slide" & gt; Test & lt; / Div & gt; .slide {width: 100px; Height: 100px; Background: #ddd; display none; Webkit-Animation: cssSlideDown 1s easily 0; } @ -webkit-keyframe cssSlideDown {0% {height: 0px;} 100% {height: 100px;}}    
 
 
 I think it would be better to use  change  in this case.  
  height: 0; Transition: Ease of height 1s; Hidden flurry;   
 Then in JS  
  if (! E.style.height || e.style.height == '0px') {console.log ( 'Foo'); E.style.height = '100px'; } Else {e.style.height = '0'; }   
 Since you are using jQuery, you can use  .css , instead you can save a lot of code.