How to make Floating animation in HTML CSS

Animations are one of the most attractive things when it comes to Websites. Even having some little minimalistic animations can make your website much more soothing and attractive.

In this blog, we will see how to we can make a little floating animati…


This content originally appeared on DEV Community and was authored by Suyash Vashishtha

Animations are one of the most attractive things when it comes to Websites. Even having some little minimalistic animations can make your website much more soothing and attractive.

In this blog, we will see how to we can make a little floating animation in HTML CSS only.

Example-
Floating image demo

This gif is from my React JS OTT webapp Link here :)

Looks cool enough for loading screens right ? You can also use it for some on page element animations.
``

Let's jump into Development part !

- HTML

Put a simple image inside of a div. This image will be the one we are going to make a float.

- CSS

Design your parent div with a flex (recommended way but totally optional).
Then make a @keyframe with an animation -

@keyframes floater {
  0%{transform: translateY(-10%);transition: ease 0.5s;}
  50%{transform: translateY(10%);transition: ease 0.5s;}
}

Now connect your animation with you're image class. And put default translateY to -10% and transition ease 0.5s for smooth animation

.float-area{
  height:100vh;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}

.floating-img{
  transform: translateY(-10%);
  animation: floater 1.5s infinite;
  transition: ease 0.5s;
  width: 80px;
  height:80px;
}

Source code -

And Poof ! You're image is floating like a charm !

Now go on and play with the values and make it more interesting according to your needs :)

Thanks for reading my blog! Please drop a Like and Comment if you found it useful


This content originally appeared on DEV Community and was authored by Suyash Vashishtha


Print Share Comment Cite Upload Translate Updates
APA

Suyash Vashishtha | Sciencx (2021-12-26T09:08:03+00:00) How to make Floating animation in HTML CSS. Retrieved from https://www.scien.cx/2021/12/26/how-to-make-floating-animation-in-html-css/

MLA
" » How to make Floating animation in HTML CSS." Suyash Vashishtha | Sciencx - Sunday December 26, 2021, https://www.scien.cx/2021/12/26/how-to-make-floating-animation-in-html-css/
HARVARD
Suyash Vashishtha | Sciencx Sunday December 26, 2021 » How to make Floating animation in HTML CSS., viewed ,<https://www.scien.cx/2021/12/26/how-to-make-floating-animation-in-html-css/>
VANCOUVER
Suyash Vashishtha | Sciencx - » How to make Floating animation in HTML CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/26/how-to-make-floating-animation-in-html-css/
CHICAGO
" » How to make Floating animation in HTML CSS." Suyash Vashishtha | Sciencx - Accessed . https://www.scien.cx/2021/12/26/how-to-make-floating-animation-in-html-css/
IEEE
" » How to make Floating animation in HTML CSS." Suyash Vashishtha | Sciencx [Online]. Available: https://www.scien.cx/2021/12/26/how-to-make-floating-animation-in-html-css/. [Accessed: ]
rf:citation
» How to make Floating animation in HTML CSS | Suyash Vashishtha | Sciencx | https://www.scien.cx/2021/12/26/how-to-make-floating-animation-in-html-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts