Floating Animation - CSS

Developer
Mario Duarte
Size
3,090 Kb
Views
117,392
  1. Floating Animation - CSS Previews
  2. Floating Animation - CSS HTML Codes
  3. Floating Animation - CSS CSS Codes

How do I make an floating animation - css?

Simple floating CSS animation using transform and box-shadow.. What is a floating animation - css? How do you make a floating animation - css? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

Floating Animation - CSS Previews
IQ Test

Floating Animation - CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating Animation - CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="avatar">	<a href="http://codepen.io/MarioDesigns/">	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/skytsunami.png" alt="Skytsunami" />	</a>	</div>	<div class="content">	<h1>Floating CSS animation</h1>	<p>	<span><a href="https://twitter.com/MDesignsuk" target="_blank"><i class="fa fa-twitter"></i></a></span>	<span><a href="https://github.com/Mario-Duarte/" target="_blank"><i class="fa fa-github"></i></a></span>	<span><a href="https://bitbucket.org/Mario_Duarte/" target="_blank"><i class="fa fa-bitbucket"></i></a></span>	<span><a href="http://codepen.io/MarioDesigns/" target="_blank"><i class="fa fa-codepen"></i></a></span>	</p>	<p>BY: Mario Duarte</p>	</div>
</div>
</body>
</html>

Floating Animation - CSS - Script Codes CSS Codes

body,
html { height: 100%; margin: 0; padding: 0; font-family: 'Helvetica', sans-serif; background: #1abc9c; background: -webkit-linear-gradient(-45deg, #1abc9c 0%, #8e44ad 100%); background: -webkit-linear-gradient(315deg, #1abc9c 0%, #8e44ad 100%); background: linear-gradient(135deg, #1abc9c 0%, #8e44ad 100%);
}
h1 { font-size: 24px; margin: 10px 0 0 0; font-weight: lighter; text-transform: uppercase; color: #eeeeee;
}
p { font-size: 12px; font-weight: light; color: #333333;
}
span a { font-size: 18px; color: #cccccc; text-decoration: none; margin: 0 10px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
span a:hover { color: #ffffff;
}
@-webkit-keyframes float { 0% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); -webkit-transform: translatey(-20px); transform: translatey(-20px); } 100% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); -webkit-transform: translatey(0px); transform: translatey(0px); }
}
@keyframes float { 0% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); -webkit-transform: translatey(0px); transform: translatey(0px); } 50% { box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); -webkit-transform: translatey(-20px); transform: translatey(-20px); } 100% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); -webkit-transform: translatey(0px); transform: translatey(0px); }
}
.container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.avatar { width: 150px; height: 150px; box-sizing: border-box; border: 5px white solid; border-radius: 50%; overflow: hidden; box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); -webkit-transform: translatey(0px); transform: translatey(0px); -webkit-animation: float 6s ease-in-out infinite; animation: float 6s ease-in-out infinite;
}
.avatar img { width: 100%; height: auto;
}
.content { width: 100%; max-width: 600px; padding: 20px 40px; box-sizing: border-box; text-align: center;
}
Floating Animation - CSS - Script Codes
Floating Animation - CSS - Script Codes
Home Page Home
Developer Mario Duarte
Username MarioDesigns
Uploaded August 04, 2022
Rating 3
Size 3,090 Kb
Views 117,392
Do you need developer help for Floating Animation - CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mario Duarte (MarioDesigns) Script Codes
Name
Element Card - Group 11 element
3D Loading Animation
3D Pyramid Animation
SoundCloud Custom Player
Interactive 3D Video Thumbnail
Carbon Atom Animation
Popular Pens with ReactJS
Menu Animation - push in
CodePen Logo Animation
MDesigns Animated Background
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!