Pure CSS Floating Animation

byCodingFlicks -September 27, 2022

0

In this blog, we will share a basic CSS animation example with a demonstration. This CSS snippet is about how to achieve a nice floating animation using HTML and CSS. We have lots of snippets about CSS animation on this website. You can check those by clicking the load more button below the homepage. Check out the video demo to get a better idea of what the snippets are all about.

I hope you have already checked the demo. In the CSS keyframes animation, keyframes define the properties for getting animation. Shorthand properties like animation name, animation count, animation delay, animation duration, and so on are used to define how and when the element gets animated.

In this basic project, we have taken 'animate' as the animation name, three seconds or 3s as the animation duration, ease-in-out as the animation timing function, and infinite as the animation iteration count. After that, we used CSS keyframes to give control over the animation we are trying to achieve. We have used CSS transform translate property to move the element to Y-direction. As an element, we have used a circular box with a background image in it. You can also use this animation to make an animated logo for your website.

You may also like:

CSS Floating Animation [ Source Code ]:

To create this snippet you have to create two files. One is CSS file with .css extension and an HTML file with a .html extension. Connect the External CSS file with the HTML file. Copy the code provided below and paste them into your project. Check the snippet on your browser and if it not working then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
	<title>CSS Floating Animation</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<div class="box"></div>
	</div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.wrapper {
	background: darkorange;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}
.box {
	background-image: url(2.jpg);
	background-size: cover;
	background-position: center center;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
	animation: animate 3s ease-in-out infinite;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 100px;
	font-family: montserrat;
	font-weight: 500;
	color: #c7c7c7;
}
@keyframes animate {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-30px);
	}
	100% {
		transform: translateY(0);
	}
}

I hope you have implemented the code correctly. Keep visiting our website for more snippets like this. Thank you for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.