title: React and CSS Animation - only animate the clicked element with a shared className
body: <p>I am working on a simple web browser drawing app using React. The app uses images for the buttons to select which color to draw with. Each of these color button images has the same className='color-button'</p>
  <p>I followed this article for how to animate the color button images on click using CSS animation:
  <a href="https://dev.to/samwatts98/how-to-easily-animate-your-react-components-on-click-with-css-keyframes-26mg" rel="nofollow noreferrer">https://dev.to/samwatts98/how-to-easily-animate-your-react-components-on-click-with-css-keyframes-26mg</a></p>
  <p>The problem is that clicking on any one color button image makes them all animate because they all share className='color-button'. I only want to animate the color button image that was clicked on.</p>
  <p>The live version of the app in its current state is here:
  <a href="https://master.d3irlm8kk772s.amplifyapp.com/" rel="nofollow noreferrer">https://master.d3irlm8kk772s.amplifyapp.com/</a></p>
  <p>Below is the code to set the &quot;push&quot; animation state with hooks plus an additional function I tried that didn't work:</p>
  <pre><code>const [push, setPush] = useState(0);
  
  //This function was tried but didn't solve the problem:
    function changeSetPush(){
      setPush(1);
    }
  </code></pre>
  <p>Here is the code for the images themselves. The first image tries the changeSetPush function, but achieves the same result as the other images:</p>
  <pre><code>{/* Circle Color Buttons */}
              &lt;div style={{width: 96}}&gt;
                  &lt;img src={BlackCircle} alt='black' className='color-button'
                    onClick={() =&gt; {changePenColor('#000000');
                    changeSetPush()}} onAnimationEnd={() =&gt; setPush(0)} push={push}
                    /&gt;
                  &lt;img src={WhiteCircle} alt='white' className='color-button'
                    onClick={() =&gt; {changePenColor('#FFFFFF');
                    setPush(1)}} onAnimationEnd={() =&gt; setPush(0)} push={push}
                    /&gt;
                  &lt;img src={RedCircle} alt='red' className='color-button'
                    onClick={() =&gt; {changePenColor('#FE2B01');
                    setPush(1)}} onAnimationEnd={() =&gt; setPush(0)} push={push}
                    /&gt;
                  &lt;img src={GreenCircle} alt='green' className='color-button'
                    onClick={() =&gt; {changePenColor('#3FF913');
                    setPush(1)}} onAnimationEnd={() =&gt; setPush(0)} push={push}
                    /&gt;
                  &lt;img src={YellowCircle} alt='yellow' className='color-button'
                    onClick={() =&gt; {changePenColor('#FCFC0A');
                    setPush(1)}} onAnimationEnd={() =&gt; setPush(0)} push={push}
                    /&gt;
                  &lt;img src={BlueCircle} alt='blue' className='color-button'
                    onClick={() =&gt; {changePenColor('#2A2EFE');
                    setPush(1)}} onAnimationEnd={() =&gt; setPush(0)} push={push}
                    /&gt;
                  &lt;img src={OrangeCircle} alt='orange' className='color-button'
                    onClick={() =&gt; {changePenColor('#FF8B00');
                    setPush(1)}} onAnimationEnd={() =&gt; setPush(0)} push={push}
                    /&gt;
                  &lt;img src={PurpleCircle} alt='purple' className='color-button'
                    onClick={() =&gt; {changePenColor('#F03EFE');
                    setPush(1)}} onAnimationEnd={() =&gt; setPush(0)} push={push}
                    /&gt;
              &lt;/div&gt;
  </code></pre>
  <p>And here is the CSS for the animation:</p>
  <pre><code>.color-button {
    width: 48px;
    height: 48px;
    vertical-align: bottom;
  }
  
  .color-button[push='1'] {
    animation: push 200ms 1;
  }
  
  @keyframes push {
    25% {
      transform:scale(0.95);
    }
    50% {
      transform:scale(0.90);
    }
    75% {
      transform:scale(0.85);
    }
    100% {
      transform:scale(0.80);
    }
  }
  </code></pre>
  <p>The GitHub repo is here: <a href="https://github.com/Johnsensei/oekaki" rel="nofollow noreferrer">https://github.com/Johnsensei/oekaki</a></p>
  <p>The React component is a functional component, so I'm not able to use this.setState.</p>
  <p>What do I change in the code to get the animation only on the color-button that was clicked?</p>
  <p>Thanks for your help.</p>