Messing about with CSS3 animations

Developer
Andy Lorimer
Size
1,831 Kb
Views
56,672
  1. Messing about with CSS3 animations Previews
  2. Messing about with CSS3 animations HTML Codes
  3. Messing about with CSS3 animations CSS Codes

How do I make an messing about with css3 animations?

What is a messing about with css3 animations? How do you make a messing about with css3 animations? This script and codes were developed by Andy Lorimer on 22 July 2022, Friday.

Messing about with CSS3 animations Previews
IQ Test

Messing about with CSS3 animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Messing about with CSS3 animations</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="cloud-wrapper"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bottom"></div>
</div>
</body>
</html>

Messing about with CSS3 animations - Script Codes CSS Codes

body { margin: 0; padding: 0; background: #3498db;
}
#cloud-wrapper { position: absolute; width: 300px; height: 180px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: bounce 8s infinite; animation: bounce 8s infinite;
}
#cloud-wrapper:after { content: ''; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -70px; width: 130px; height: 20px; background: rgba(0, 0, 0, 0.4); border-radius: 100%; -webkit-filter: blur(12px); -moz-filter: blur(12px); -o-filter: blur(12px); filter: blur(12px);
}
.bubble { position: absolute; display: inline-block; bottom: 0; background: white; padding: 55px; border-radius: 100%; border-top: solid 2px #f3f3f3; z-index: 4;
}
.bubble:nth-child(2) { padding: 85px; left: 45px;
}
.bubble:nth-child(3) { padding: 65px; left: 135px;
}
.bubble:nth-child(4) { padding: 45px; right: 0;
}
.bottom { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 67%; height: 50px; background: white;
}
@-webkit-keyframes bounce { 0% {top: 50%;} 50% {top: 45%;} 100% {top: 50%;}
}
@keyframes bounce { 0% {top: 50%;} 50% {top: 45%;} 100% {top: 50%;}
}
Messing about with CSS3 animations - Script Codes
Messing about with CSS3 animations - Script Codes
Home Page Home
Developer Andy Lorimer
Username andylorimer
Uploaded July 22, 2022
Rating 3
Size 1,831 Kb
Views 56,672
Do you need developer help for Messing about with CSS3 animations?

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!

Andy Lorimer (andylorimer) Script Codes
Name
Off-Canvas Menu
Scroll down button
Searchbar with Navigation
Password Input
Input field - jQuery test
Sign-up Card
Feature Slider
Social Icons Transition
More button Loader
Masked.js
Create amazing sales emails 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!