title: Unwanted effect with CSS animation hover happening a second time on each child
body: <p>When applying a CSS transform based on a hover for my element which contains a title a summary and some other elements, all the children elements would move a second time when I hover over them inside the element. </p>
  
  <p>Basically, the parent and its children(title, highlight...) will be animated a first time when I hover over it. <strong>(this is the intended behaviour).</strong> </p>
  
  <p>But, if I hover over the title, it will apply the animation to the title individually, a second time. So, the title would be transformed a first time, let's say going up by 10px, and when I hover over it, it will go up again by 10 other pixels. The outer div (parent) will move only once. <strong>(Unwanted)</strong></p>
  
  <p>It is like I have applied their own animations to the parent and each one of the children.</p>
  
  <p><em>I tried to apply transform: none; to all the children elements, but, it does not help in my case.</em></p>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>.badge {
    flex-basis: 50%;
    transform: translateY(0);
    transition-duration: 1s;
    transition-property: transform;
    transition-timing-function: ease-out;
    transition-delay: 1s;
    backface-visibility: hidden;
  }
  
  .badge:last-child {
    flex-basis: 100%;
  }
  
  .badge :hover {
    transform: translateY(-8px);
  }
  
  .badge__badge {
    margin-bottom: 40px;
    margin-right: 40px; 
    width: 99%;
    height: 200px;
    background-color: rgb(27, 139, 45);
    border-radius: 8px;
    color: aliceblue;
    box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
  
  }
  
  .badge__prime {
    margin-left: 20px;
    margin-right: auto;
  
  }
  
  .badge__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  
  }
  
  .badge__icon {
    width: 40px;
    height: auto;
    margin: 10px;
  
  }
  
  .badge__highlight {
    margin-right: auto;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
  }
  </code></pre>
  
  <p><strong>JSX (React):</strong></p>
  
  <pre><code>      &lt;div className="badge"&gt;
          &lt;div className="badge__badge"
            style={{ backgroundColor: this.props.backgroundColor }}&gt;
            &lt;div className="badge__content"&gt;
              {this.props.prime ? &lt;h4 className="badge__prime"&gt;PRIME&lt;/h4&gt;
                : &lt;h4 className="badge__prime"&gt;Free&lt;/h4&gt;}
              &lt;h2 className="badge__title"&gt;{this.props.titleBadge}&lt;/h2&gt;
              &lt;div className="badge__highlight"&gt;
                {this.props.highlightBadge.split('\n').map((i, key) =&gt; {
                  return &lt;div key={key}&gt;{i}&lt;/div&gt;;
                })}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;img className="badge__icon"alt="" src={this.props.iconBadge} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>Expected results:</em></strong> the parent div and all its children will animate once on hover and will come back to their state once the mouse is outside of the div.</p>
  
  <p><strong><em>Actual results:</em></strong> The parent div and all its children animate once on hover, and the children will animate again if the mouse is over one of them.</p>
  
  <p><a href="https://jsfiddle.net/fastblast/2enu5r1p/10/" rel="nofollow noreferrer">Link to a jsfiddle that shows my issue</a></p>