title: How does a dom element with two css animation work and interact with each others?
body: <p>i'm currently applying two animations to some images. The first one when entering view, the second one when hovering.</p>
  
  <pre><code>.Intro {  
    background-image : url('../../img/backgroundWorkshop.svg');
    background-size: cover;
    min-height: 100vh;
    color: black;
    padding-top : 20vh;
    display: flex;
    justify-content: center;
  }
  .AnimationGame1{
    animation: animGame 1 2s ease-in forwards;
  }
  .AnimationGame2{
    animation: animGame 1 2s ease-in forwards 0.25s;
  }
  .AnimationGame3{
    animation: animGame 1 2s ease-in forwards 0.5s;
  }
  .AnimationGame4{
    animation: animGame 1 2s ease-in forwards 0.75s;
  }
  .AnimationGame img:hover{
    animation: animGameHover 1 10s ease-out alternate;
    position: relative;
    padding: 3px;
    width: 100%;
  }
  
  @keyframes animGame {
    0% {
      transform: translateX( -2vw) translateY(1vh);
      opacity: 0;
    }
    100% {
      transform: translateX(0) translateY(1vh);
      opacity: 1;
    }
  }
  @keyframes animGameHover {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(2.5);
    }
      }
  </code></pre>
  
  <p>Problem is when i hover those images, the hover animation start then when it's over the "AnimationGame" class animation start again.</p>
  
  <p>Here is the JSX i'm using react-bootstrap:</p>
  
  <pre><code>    &lt;Row className="Intro"&gt;
          &lt;Col md={2}&gt;
              &lt;p className="middle"&gt;Previous&lt;/p&gt;
          &lt;/Col &gt;
              &lt;Col sm={6} md={4}&gt;
              &lt;div className="AnimationGame"&gt;
                  &lt;div&gt;
                      &lt;img src={anim1} className="AnimationGame1"&gt;&lt;/img&gt;
                      &lt;img src={anim2} className="AnimationGame2"&gt;&lt;/img&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;img src={anim3} className="AnimationGame3"&gt;&lt;/img&gt;
                      &lt;img src={anim4} className="AnimationGame4"&gt;&lt;/img&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/Col&gt;
          &lt;Col sm={6} md={4}&gt;
              &lt;div className="Presentation"&gt;
                  &lt;h1 className="slideTextTitle"&gt;PC Gamer and Web Addict&lt;/h1&gt;
                  &lt;p className="slideTextPres"&gt;&lt;/p&gt;
  
              &lt;/div&gt;
              &lt;div className="parcours"&gt;
  
              &lt;/div&gt;
              &lt;div className="social"&gt;
  
              &lt;/div&gt;
              &lt;div className="suite"&gt;
  
              &lt;/div&gt;
          &lt;/Col&gt;
          &lt;Col md={2}&gt;
              &lt;p className="right middle"&gt;Next&lt;/p&gt;
          &lt;/Col&gt;
      &lt;/Row&gt;
  </code></pre>
  
  <p>Do someone understand why this is happening ?</p>