CosmoXplore, where the celestial canvas unfolds its mysteries before your eyes. Immerse yourself in a cosmic odyssey, as we harness the power of NASA's API to bring you a symphony of space resources.
I'm adding a smooth floating animation to an image within a web page. This feature will give the image a gentle, continuous up-and-down motion, creating a visually appealing effect that can draw attention to the image. I find that missing in APoD image, so i have added it.
It should be implemented because
Here's how I have implemented it:
CSS Keyframes: Define the stages of the animation using @keyframes. This will control the movement of the image over time.
Animation Properties: Apply the animation to your image using CSS properties such as animation-name, animation-duration, animation-timing-function, and animation-iteration-count.
Transform Property: Use the transform property within the keyframes to move the image vertically (translateY) to create the floating effect.
Describe the feature
I'm adding a smooth floating animation to an image within a web page. This feature will give the image a gentle, continuous up-and-down motion, creating a visually appealing effect that can draw attention to the image. I find that missing in APoD image, so i have added it.
It should be implemented because
Here's how I have implemented it:
Additional context
Here's the implementation of the same:
https://github.com/PranavBarthwal/cosmoXplore/assets/78197261/3559c077-5234-4619-8686-4534989c6ce9
Would you like to work on this issue?
Yes