CodePen

HTML

            
              <div class='test'> I am DIV 1 </div>
<div class='test'> I am DIV 2 </div>
<div class='test'> I am DIV 3 </div>
<div class='test'> I am DIV 4 </div>
            
          
!
via HTML Inspector

CSS

            
              div { 
  margin:20px -2px; 
  border: 1px solid black; 
  width: 100px; 
  height:40px; 
  display: inline-block;
  padding: 0;
 -webkit-animation-name: none;
-moz-animation-name: none;
-o-animation-name: none;
animation-name: none;
-webkit-animation: none 2s 0s 1;
-moz-animation: none 2s 0s 1;
-ms-animation: none 2s 0s 1;
-o-animation: none 2s 0s 1;
}


.bounce {
position: relative;
-webkit-animation-name: highlightQuick;
-moz-animation-name: highlightQuick;
-o-animation-name: highlightQuick;
animation-name: highlightQuick;
-webkit-animation: highlightQuick 2s 0s 1;
-moz-animation: highlightQuick 2s 0s 1;
-ms-animation: highlightQuick 2s 0s 1;
-o-animation: highlightQuick 2s 0s 1;
background-color: red;
top: -3px;
}

@-webkit-keyframes highlightQuick {
  0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); }
  10% { -webkit-transform: translateY(-14px); }
  15% { -webkit-transform: translateY(0px); }
  20% { -webkit-transform: translateY(-14px); }
}
@-moz-keyframes highlightQuick {
  0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); }
  10% { -moz-transform: translateY(-14px); }
  15% { -moz-transform: translateY(0px); }
  20% { -moz-transform: translateY(-14px); }
}
@-o-keyframes highlightQuick {
  0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); }
  10% { -o-transform: translateY(-14px); }
  15% { -o-transform: translateY(0px); }
  20% { -o-transform: translateY(-14px); }
}
@keyframes highlightQuick {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  10% { transform: translateY(-14px); }
  15% { transform: translateY(0px); }
  20% { transform: translateY(-14px); }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $( '.test' ).on( 'mouseenter', function( event ) {
  
  //check we really have removed the class!!!
  if( $( this ).hasClass( 'bounce' ) ){
    console.log('has class');
  } else {
    console.log('nope');
  }

  $( this ).addClass( ' bounce' );
  
  
  if( $( this ).next().hasClass( 'bounce' ) ){
    console.log('class');
  } else {
    console.log('no');
  }
  
  
  $( this ).next().addClass( ' bounce' )
 
});

$( '.test' ).on( 'mouseleave', function( event ) {
  $( '.test' ).removeClass( 'bounce' )
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................