Path To follow

1. Each crystal will have an animation corresponding to its name.
2. spin: rotate until it completes a full turn. (360)
3. ping: gradually increase the size while fading out completely. (125)
4. pulse: fade out completely at the midpoint. (0)
5. bounce: move upward, then return to its original position. (-12.5)
6. wiggle: tilt to left, then to right, then back. (±12.5)
7. The animation runs infinitely for 5s, with a linear timing and lasts for 1s.
8. A transform function handles the animation frames of each crystal. 💡2

   hint 02: Transform Functions in CSS

   Consider CSS transform functions as reusable transformations;
   such as rotating, scaling, or translating.

   index.html

   global.css

   rotate.css

   scale.css

   translate.css

   Output

   close

Trail Markings