WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to Create a Floating Animation using CSS

If you are looking to create a floating animation just using CSS, then you are in the right place.

Alternatively, you can visit the CodePen to see the animation in action.

In our example, the key things we need to add are:

transition property to move the element smoothly, over a given duration
@keyframes property which specifies the animation code
animation property which applies an animation between styles
transform property which allows you to move, rotate, scale, and skew elements

In our example, we are using transform: translate([value]); to move the element up and down.

The Code

HTML


<div class="container">
  <div class="logo">
    <a href="https://silvawebdesigns.com/">
      <img src="https://silvawebdesigns.com/silva-circle.png" alt="Silva Web Designs" />
    </a>
  </div>
  <div class="content">
    <h1>Floating CSS Animation</h1>
    <p>Follow Silva Web Designs:</p>
    <p>
      <span><a href="https://twitter.com/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a></span>
      <span><a href="http://instagram.com/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-instagram"></i></a></span>
      <span><a href="https://www.linkedin.com/company/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-linkedin"></i></a></span>
    </p>
  </div>
</div>

CSS


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;1,300&display=swap');

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
	background: rgb(71, 71, 181);
	background: -moz-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 181, 1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 181, 1) 100%);
	background: linear-gradient(135deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 182, 1) 100%);  
  font-weight: 600;
}

h1 {
  font-size: 24px;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
  color: #FFF;
}

p {
  font-size: 16px;
  color: #FFF;
}

span a {
  font-size: 18px;
  color: #FFF;
  text-decoration: none;
  margin: 0 10px;
  transition: all 0.4s ease-in-out;
}

span a:hover {
  color: #FFF;
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 5px #20232c solid;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
}

.logo img {
  width: 100%;
  height: auto;
}

.content {
  width: 100%;
  max-width: 600px;
  padding: 20px 40px;
  box-sizing: border-box;
  text-align: center;
}

.fa {
  font-size: 38px;
  margin-top: 20px;
}

And there you have it! A nice, smooth floating animation made purely in CSS. If you need any help, just give us a shout!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

2 thoughts on “How to Create a Floating Animation using CSS

Join the discussion

Related Posts

Related - How to Create A Simple Looping Background Colour Animation With CSS

CSS / 1st January 2024

How to Create A Simple Looping Background Colour Animation With CSS

Read More