CSS Floating Animation Last Updated : 14 Oct, 2024 Comments Improve Suggest changes Like Article Like Report CSS Floating Animation creates a visual effect where elements appear to float smoothly, often mimicking natural movement like drifting in water or air. This effect is achieved using CSS properties such as @keyframes, transform, and animation, giving elements a subtle, continuous floating motion.CSS animations need the following. Creating CSS Floating AnimationDefine Floating Element: Set dimensions, background color, and shape with CSS (border-radius: 50% for circular effect).Positioning: Use position: relative; to allow the element to move within its own space.Keyframe Definition: Create the @keyframes float animation for up-and-down motion using translateY().Smooth Movement: Use animation: float 3s ease-in-out infinite; for smooth, continuous floating motion.Motion Control: The element moves up at 50% and returns to its original position by 100%.Example: Here we are following above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Floating Animation Example</title> <style> .floating { width: 100px; height: 100px; background-color: lightblue; border-radius: 50%; position: relative; animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } </style> </head> <body> <h3>CSS Floating Animation</h3> <div class="floating"></div> </body> </html> Output: CSS Floating Animation Example Output Comment More infoAdvertise with us Next Article CSS Floating Animation M MohdArsalan Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads Tailwind CSS Animation This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used for animating elements with CSS animation. In CSS, we can do that by using the CSS animation property.Animation classes :animate-spin: This class is used to add a linear spin an 2 min read W3.CSS Animations CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. W3.CSS provides developers with some good inbuilt animation classes. The list of classes is as follows: Sr. No. Class Name De 5 min read Primer CSS Fade in Animation Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read CSS Animations CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.Use @keyframes to define the animation steps.Apply animations with properties like animation-name and animation-duration.Control the animation flow using animation-timin 7 min read Loading Text Animation Effect using CSS There are a lot of animations possible in CSS and today we will look at the loading text animation. The basic idea behind the working of this animation is the application of animation delay. Every alphabet is delayed by .1s so that each alphabet animates with a little delay and give the loading anim 3 min read Like