Google Dots Animation

Developer
Eliseo Martelli
Size
2,241 Kb
Views
36,432
  1. Google Dots Animation Previews
  2. Google Dots Animation HTML Codes
  3. Google Dots Animation CSS Codes

How do I make an google dots animation?

What is a google dots animation? How do you make a google dots animation? This script and codes were developed by Eliseo Martelli on 30 September 2022, Friday.

Google Dots Animation Previews
IQ Test

Google Dots Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Dots Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div id="blue" class="dot"></div> <div id="red" class="dot"></div> <div id="yellow" class="dot"></div> <div id="green" class="dot"></div>
</div>
</body>
</html>

Google Dots Animation - Script Codes CSS Codes

.dot { display: inline-block; border-radius: calc(24px/2); width: 24px; height: 24px; margin: calc(16 * 24px / 50); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: move 2s infinite; animation: move 2s infinite;
}
#blue { background: #0057e7; -webkit-animation-delay: calc(0.15s * 1); animation-delay: calc(0.15s * 1);
}
#red { background: #d62d20; -webkit-animation-delay: calc(0.15s * 2); animation-delay: calc(0.15s * 2);
}
#yellow { background: #ffa700; -webkit-animation-delay: calc(0.15s * 3); animation-delay: calc(0.15s * 3);
}
#green { background: #008744; -webkit-animation-delay: calc(0.15s * 4); animation-delay: calc(0.15s * 4);
}
.container { display: inline-block; position: absolute; width: intrinsic; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0);
}
@-webkit-keyframes move { 50% { -webkit-transform: translateY(calc(-24 * 24px / 50)); transform: translateY(calc(-24 * 24px / 50)); }
}
@keyframes move { 50% { -webkit-transform: translateY(calc(-24 * 24px / 50)); transform: translateY(calc(-24 * 24px / 50)); }
}
Google Dots Animation - Script Codes
Google Dots Animation - Script Codes
Home Page Home
Developer Eliseo Martelli
Username eliseomartelli
Uploaded September 30, 2022
Rating 3
Size 2,241 Kb
Views 36,432
Do you need developer help for Google Dots Animation?

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!

Eliseo Martelli (eliseomartelli) Script Codes
Name
Checkbox
A Pen by Eliseo Martelli
Cute Terminal
Simple Heart
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!