enhancement/Issue-99: Refactor keyframes to be a transition

[DevLab2425]

Related Issue

Fix #99

Summary of Changes

• Remove styles keyframes and replace with transition for popover indicators
  • Guides
  • Table of Contents

Details

With keyframes it's a linear start-to-finish type animation. Our issue was that when the page/element loads, the animation starts. And in this case, would play the backwards animation which must first display the "finish" state and animate back to the "start".

With the transition property, we can set various states which are unaware of specific place in a linear timeline and the transition between them is seamless. So, we set the "has" state, and "not-has" state individually. When either of these states is changed, the browser will transition the property to the active state.

Screen.Recording.2024-10-12.at.23.07.17.mov

[netlify]

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit	aed409e
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/670b3a9081413400087e356e
😎 Deploy Preview	https://deploy-preview-109--super-tapioca-5987ce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thescientist13]

Thanks and really appreciate the breakdown of what was happening as well as the solution. 🙇‍♂️

I will give it a couple days for other folks to review otherwise we can plan to merge this after our weekly meeting this week.