title: Animate a div onHover
body: <p>I would like to rotate a div when the cursor is on the div like in <a href="https://youtu.be/ru6iSaSNvmI?t=325" rel="nofollow noreferrer">this video</a>.</p>
  
  <p>I would like to use keyframes because they are more customizable</p>
  
  <pre class="lang-css prettyprint-override"><code>div.myElement {
      ...
      animation: mainMenu 2s infinite;
      animation-play-state: initial;
  }
  
  div.myElement:hover {
      animation-play-state: running;
  }
  
  @keyframes mainMenu {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(45deg);
      }
  }
  </code></pre>
  
  <p>It doesn't work but i don't know what I need to put in my div.myElement and div.myElement:hover. In div.Element, it is 0% to 100% and 100% to 0% for div.Element:hover.</p>