title: CSS keep changes after animation
body: <p>I am making a css slider. I have 10 slides in total and display only 5 at a time. I've managed to scroll the slides to the left so that slide 1 disappears and slide 7 becomes visible once the element is hovered. By using animation-fill-mode: forwards I manage to keep the state after animation but when I unhover the element goes back to the original state.</p>
  <p>Is there any way to make the change permanent and once I hover again the element scrolls further?</p>
  <pre><code>&lt;div class=&quot;carousel&quot;&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 1&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 2&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 3&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 4&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 5&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 6&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 7&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 8&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 9&lt;/div&gt;
     &lt;div class=&quot;slide&quot;&gt;Slide 10&lt;/div&gt;
  &lt;/div&gt;
  
  .slide {
      height: 214px;
      border: 1px solid #dee2e6;
      border-radius: 0.25rem;
      background-color: #fff;
      width: 200px;
      display: inline-block;
      position: relative;
  }
  
  .carousel{
      position: relative;
      margin: auto;
      margin-top: 20px;
      transition: 1s;
      height: 222px;
      white-space: nowrap;
      overflow: hidden;
      width: 1270px;
      background-color:grey;
  }
  
  .carousel:hover .slide {
    animation-name: example;
    animation-duration: 1.5s;
    animation-fill-mode:forwards;
  }
  
  @keyframes example {
    from {left: 0px;}
    to {left: -202px;}
  }
  </code></pre>