title: How do I add an animation when this image appears on this checkbox grid?
body: <p>For my website when they check off a goal I want it to display a checkmark image and give them a sense of accomplishment with a cool animation. Here's my code so far but the image just disappears and reappears in the grid. Also, any tips on where to go to track data would be awesome, I'm trying to track the number of days the box is ticked and display it in the middle of the image.</p>
  <pre><code>      &lt;aside id=&quot;goalBox&quot;&gt;
    &lt;span class=&quot;goalBoxes&quot; class=&quot;gridBoxes&quot; id=&quot;goalOne&quot;&gt;
      &lt;img
        id=&quot;imageBoxOne&quot;
        src=&quot;images/checkBoxIcons/flameV3.png&quot;
        alt=&quot;flaming checkmark&quot;
        class=&quot;flamingCheckmark&quot;
      /&gt;
    &lt;/span&gt;
    &lt;span class=&quot;goalBoxes&quot; class=&quot;gridBoxes&quot; id=&quot;goalTwo&quot;&gt;
      &lt;img
        id=&quot;imageBoxTwo&quot;
        src=&quot;images/checkBoxIcons/flameV3.png&quot;
        alt=&quot;flaming checkmark&quot;
        class=&quot;flamingCheckmark&quot;
      /&gt;
    &lt;/span&gt;
    &lt;span class=&quot;goalBoxes&quot; class=&quot;gridBoxes&quot; id=&quot;goalThree&quot;&gt;
      &lt;img
        id=&quot;imageBoxThree&quot;
        src=&quot;images/checkBoxIcons/flameV3.png&quot;
        alt=&quot;flaming checkmark&quot;
        class=&quot;flamingCheckmark&quot;
      /&gt;
    &lt;/span&gt;
    &lt;span class=&quot;goalBoxes&quot; class=&quot;gridBoxes&quot; id=&quot;goalFour&quot;&gt;
      &lt;img
        id=&quot;imageBoxFour&quot;
        src=&quot;images/checkBoxIcons/flameV3.png&quot;
        alt=&quot;flaming checkmark&quot;
        class=&quot;flamingCheckmark&quot;
      /&gt;
    &lt;/span&gt;
    &lt;span class=&quot;goalBoxes&quot; class=&quot;gridBoxes&quot; id=&quot;goalFive&quot;&gt;
      &lt;img
        id=&quot;imageBoxFive&quot;
        src=&quot;images/checkBoxIcons/flameV3.png&quot;
        alt=&quot;flaming checkmark&quot;
        class=&quot;flamingCheckmark&quot;
      /&gt;
    &lt;/span&gt;
    &lt;b id=&quot;num&quot;&gt;75&lt;/b&gt;
    &lt;span class=&quot;goalBoxes&quot; class=&quot;gridBoxes&quot; id=&quot;goalSix&quot;&gt;
      &lt;img
        id=&quot;imageBoxSix&quot;
        src=&quot;images/checkBoxIcons/flameV3.png&quot;
        alt=&quot;flaming checkmark&quot;
        class=&quot;flamingCheckmark&quot;
      /&gt;
    &lt;/span&gt;
  &lt;/aside&gt;
  </code></pre>
  <pre><code>#goals {
    position: absolute;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, -50%);
    margin: 0 auto;
  }
  #goalBox {
    /* padding-top: 1vw;
      padding-right: 1vw; */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* grid-template-rows: repeat(2, 1fr); */
    grid-gap: none;
    justify-content: center;
    /* border: 0.2vw solid var(--text-color-male) ; */
    border-radius: 5px;
  }
  .flamingCheckmark {
    height: 8vw;
    width: auto;
    z-index: 0;
  }
  /* .goalBoxes {
    border: 5px solid black;
    background-color: #5B6770;
    border-radius: 10px;
  } */
  #goalOne {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  #goalTwo {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  #goalThree {
    grid-column: 3/4;
    grid-row: 1/2;
  }
  #goalFour {
    grid-column: 4/5;
    grid-row: 1/2;
  }
  #goalFive {
    grid-column: 5/6;
    grid-row: 1/2;
  }
  #goalSix {
    grid-column: 6/7;
    grid-row: 1/2;
  }
  #num {
    grid-column: 1/2;
    grid-row: 1/2;
    z-index: 1;
    place-self: center;
    /* color: var(--text-color-male); */
  }
  </code></pre>
  <pre><code>function testFunc(goalBox) {
    let image = goalBox.children[0].style.visibility
    console.log(image)
    if (image == &quot;hidden&quot;) {
      goalBox.children[0].style.visibility = &quot;visible&quot;
    } else  {
      goalBox.children[0].style.visibility = &quot;hidden&quot;;
    }
    console.log('success')
  }
  const goalBoxes = document.querySelectorAll(&quot;.goalBoxes&quot;);
  goalBoxes.forEach(item =&gt; {
     item.addEventListener('click', () =&gt; testFunc(item));
  });
  </code></pre>