title: How to activate a CSS animation only when hovering - without javascript
body: <p>Is there a way to get this CSS code: </p>
  
  <pre><code>/** Swing **/ 
  .animated { 
      -webkit-animation-duration: 1s; 
      animation-duration: 1s; 
      -webkit-animation-fill-mode: both; 
      animation-fill-mode: both; 
  } 
  
  @-webkit-keyframes swing { 
      20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 
      20% { -webkit-transform: rotate(15deg); } 
      40% { -webkit-transform: rotate(-10deg); } 
      60% { -webkit-transform: rotate(5deg); } 
      80% { -webkit-transform: rotate(-5deg); } 
      100% { -webkit-transform: rotate(0deg); } 
  } 
  @keyframes swing { 
      20% { transform: rotate(15deg); } 
      40% { transform: rotate(-10deg); } 
      60% { transform: rotate(5deg); } 
      80% { transform: rotate(-5deg); } 
      100% { transform: rotate(0deg); } 
  } 
  
  .swing { 
      -webkit-transform-origin: top center; 
      transform-origin: top center; 
      -webkit-animation-name: swing; 
      animation-name: swing; 
  }
  
  
  /****/
  </code></pre>
  
  <p>Generated from this website: <a href="https://coveloping.com/tools/css-animation-generator" rel="nofollow">https://coveloping.com/tools/css-animation-generator</a></p>
  
  <p>To work only when hovering over an element? 
  I added: </p>
  
  <pre><code>.swing:hover { 
      -webkit-transform-origin: top center; 
      transform-origin: top center; 
      -webkit-animation-name: swing; 
      animation-name: swing; 
  }
  </code></pre>
  
  <p>Myself and it's not working. </p>
  
  <p>Oh... And I'm trying to avoid using javascript/jQuery so the page will load faster.. </p>