Google dots animation
How do I make an google dots animation?
Recreating a few animations from the new goggle logo.Respecting the gridLogo explained: https://design.google.com/articles/evolving-the-google-identity/. What is a google dots animation? How do you make a google dots animation? This script and codes were developed by Gregor Adams on 20 June 2022, Monday.
Google dots animation Previews
Google dots animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google dots animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="paper"> <div class="grid"> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="row __#{rows}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> <div class="col __#{cols}"></div> </div> <div class="logo"> <div class="g _1"></div> <div class="o _2"></div> <div class="o"></div> <div class="g _3"></div> <div class="l"></div> <div class="e _4"></div> </div>
</div>
</body>
</html>Google dots animation - Script Codes CSS Codes
body { height: 100vh; width: 100vw; margin: 0; overflow: hidden; background: #f5f5f5; 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-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.paper { height: 300px; width: 300px; position: relative; background: #fff;
}
.logo { position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
.logo div { position: absolute; top: 50%; left: 50%; height: 33.33333px; width: 33.33333px; border-radius: 16.66667px; background-color: currentColor; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0);
}
.logo ._1, .logo ._2, .logo ._3, .logo ._4 { -webkit-animation-duration: 0.5s, 1.5s, 0.2s, 1.5s; animation-duration: 0.5s, 1.5s, 0.2s, 1.5s; -webkit-animation-timing-function: ease-in-out, ease-out, ease-in, linear; animation-timing-function: ease-in-out, ease-out, ease-in, linear; -webkit-animation-fill-mode: forwards,forwards,forwards,forwards; animation-fill-mode: forwards,forwards,forwards,forwards; -webkit-animation-iteration-count: 3,2,1,infinite; animation-iteration-count: 3,2,1,infinite;
}
.logo ._1 { -webkit-animation-delay: 0s, 1.5s, 5.625s, 5.825s; animation-delay: 0s, 1.5s, 5.625s, 5.825s;
}
.logo ._2 { -webkit-animation-delay: 0.0625s, 1.5625s, 5.3125s, 5.5125s; animation-delay: 0.0625s, 1.5625s, 5.3125s, 5.5125s;
}
.logo ._3 { -webkit-animation-delay: 0.125s, 1.625s, 5s, 5.2s; animation-delay: 0.125s, 1.625s, 5s, 5.2s;
}
.logo ._4 { -webkit-animation-delay: 0.1875s, 1.6875s, 4.6875s, 4.8875s; animation-delay: 0.1875s, 1.6875s, 4.6875s, 4.8875s;
}
.logo ._1 { -webkit-transform: translate(-50%, -50%) translateX(-300%) scale(1); transform: translate(-50%, -50%) translateX(-300%) scale(1); color: #4285f4; -webkit-animation-name: listening, user-speaks_1, to_thinking, thinking; animation-name: listening, user-speaks_1, to_thinking, thinking;
}
.logo ._2 { -webkit-transform: translate(-50%, -50%) translateX(-100%) scale(1); transform: translate(-50%, -50%) translateX(-100%) scale(1); color: #db4437; -webkit-animation-name: listening, user-speaks_2, to_thinking, thinking; animation-name: listening, user-speaks_2, to_thinking, thinking;
}
.logo ._3 { -webkit-transform: translate(-50%, -50%) translateX(100%) scale(1); transform: translate(-50%, -50%) translateX(100%) scale(1); color: #f4b400; -webkit-animation-name: listening, user-speaks_3, to_thinking, thinking; animation-name: listening, user-speaks_3, to_thinking, thinking;
}
.logo ._4 { -webkit-transform: translate(-50%, -50%) translateX(300%) scale(1); transform: translate(-50%, -50%) translateX(300%) scale(1); color: #0f9d58; -webkit-animation-name: listening, user-speaks_4, to_thinking, thinking; animation-name: listening, user-speaks_4, to_thinking, thinking;
}
.grid { position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
.grid .col { position: absolute; top: 0; width: 1px; height: 100%; -webkit-transform: scaleY(1.5); transform: scaleY(1.5); background: #ddd;
}
.grid .col.__0 { left: 0%;
}
.grid .col.__1 { left: 11.11111%;
}
.grid .col.__2 { left: 22.22222%;
}
.grid .col.__3 { left: 33.33333%;
}
.grid .col.__4 { left: 44.44444%;
}
.grid .col.__5 { left: 55.55556%;
}
.grid .col.__6 { left: 66.66667%;
}
.grid .col.__7 { left: 77.77778%;
}
.grid .col.__8 { left: 88.88889%;
}
.grid .col.__9 { left: 100%;
}
.grid .row { position: absolute; left: 0; height: 1px; width: 100%; -webkit-transform: scaleX(1.5); transform: scaleX(1.5); background: #ddd;
}
.grid .row.__0 { top: 0%;
}
.grid .row.__1 { top: 11.11111%;
}
.grid .row.__2 { top: 22.22222%;
}
.grid .row.__3 { top: 33.33333%;
}
.grid .row.__4 { top: 44.44444%;
}
.grid .row.__5 { top: 55.55556%;
}
.grid .row.__6 { top: 66.66667%;
}
.grid .row.__7 { top: 77.77778%;
}
.grid .row.__8 { top: 88.88889%;
}
.grid .row.__9 { top: 100%;
}
@-webkit-keyframes listening { 0% { top: 50%; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 33% { top: 45%; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 66% { top: 55%; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { top: 50%; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
}
@keyframes listening { 0% { top: 50%; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 33% { top: 45%; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 66% { top: 55%; -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { top: 50%; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
}
@-webkit-keyframes user-speaks_1 { 0%, 100% { height: 33.33333px; } 16% { height: 166.66667px; } 33% { height: 100px; } 50% { height: 133.33333px; } 66% { height: 100px; } 84% { height: 66.66667px; }
}
@keyframes user-speaks_1 { 0%, 100% { height: 33.33333px; } 16% { height: 166.66667px; } 33% { height: 100px; } 50% { height: 133.33333px; } 66% { height: 100px; } 84% { height: 66.66667px; }
}
@-webkit-keyframes user-speaks_2 { 0%, 100% { height: 33.33333px; } 16% { height: 100px; } 33% { height: 66.66667px; } 50% { height: 100px; } 66% { height: 66.66667px; } 84% { height: 50px; }
}
@keyframes user-speaks_2 { 0%, 100% { height: 33.33333px; } 16% { height: 100px; } 33% { height: 66.66667px; } 50% { height: 100px; } 66% { height: 66.66667px; } 84% { height: 50px; }
}
@-webkit-keyframes user-speaks_3 { 0%, 100% { height: 33.33333px; } 16% { height: 166.66667px; } 33% { height: 133.33333px; } 50% { height: 166.66667px; } 66% { height: 100px; } 84% { height: 66.66667px; }
}
@keyframes user-speaks_3 { 0%, 100% { height: 33.33333px; } 16% { height: 166.66667px; } 33% { height: 133.33333px; } 50% { height: 166.66667px; } 66% { height: 100px; } 84% { height: 66.66667px; }
}
@-webkit-keyframes user-speaks_4 { 0%, 100% { height: 33.33333px; } 16% { height: 100px; } 33% { height: 66.66667px; } 50% { height: 100px; } 66% { height: 66.66667px; } 84% { height: 50px; }
}
@keyframes user-speaks_4 { 0%, 100% { height: 33.33333px; } 16% { height: 100px; } 33% { height: 66.66667px; } 50% { height: 100px; } 66% { height: 66.66667px; } 84% { height: 50px; }
}
@-webkit-keyframes to_thinking { to { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); }
}
@keyframes to_thinking { to { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); }
}
@-webkit-keyframes to_replying_1 { from { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } to { -webkit-transform: translate(-50%, -50%) rotate(90deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(90deg) translate(200%, 0); }
}
@keyframes to_replying_1 { from { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } to { -webkit-transform: translate(-50%, -50%) rotate(90deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(90deg) translate(200%, 0); }
}
@-webkit-keyframes to_replying_2 { from { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } to { -webkit-transform: translate(-50%, -50%) rotate(180deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(180deg) translate(200%, 0); }
}
@keyframes to_replying_2 { from { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } to { -webkit-transform: translate(-50%, -50%) rotate(180deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(180deg) translate(200%, 0); }
}
@-webkit-keyframes to_replying_3 { from { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } to { -webkit-transform: translate(-50%, -50%) rotate(270deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(270deg) translate(200%, 0); }
}
@keyframes to_replying_3 { from { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } to { -webkit-transform: translate(-50%, -50%) rotate(270deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(270deg) translate(200%, 0); }
}
@-webkit-keyframes to_replying_4 { from { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } to { -webkit-transform: translate(-50%, -50%) rotate(360deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(360deg) translate(200%, 0); }
}
@keyframes to_replying_4 { from { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } to { -webkit-transform: translate(-50%, -50%) rotate(360deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(360deg) translate(200%, 0); }
}
@-webkit-keyframes thinking { 0% { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } 20% { -webkit-transform: translate(-50%, -50%) rotate(45deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(45deg) translate(200%, 0); } 40% { -webkit-transform: translate(-50%, -50%) rotate(135deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(135deg) translate(200%, 0); } 60% { -webkit-transform: translate(-50%, -50%) rotate(225deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(225deg) translate(200%, 0); } 80% { -webkit-transform: translate(-50%, -50%) rotate(315deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(315deg) translate(200%, 0); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(360deg) translate(200%, 0); }
}
@keyframes thinking { 0% { -webkit-transform: translate(-50%, -50%) translate(200%, 0); transform: translate(-50%, -50%) translate(200%, 0); } 20% { -webkit-transform: translate(-50%, -50%) rotate(45deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(45deg) translate(200%, 0); } 40% { -webkit-transform: translate(-50%, -50%) rotate(135deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(135deg) translate(200%, 0); } 60% { -webkit-transform: translate(-50%, -50%) rotate(225deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(225deg) translate(200%, 0); } 80% { -webkit-transform: translate(-50%, -50%) rotate(315deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(315deg) translate(200%, 0); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg) translate(200%, 0); transform: translate(-50%, -50%) rotate(360deg) translate(200%, 0); }
}
| Developer | Gregor Adams |
| Username | pixelass |
| Uploaded | June 20, 2022 |
| Rating | 4.5 |
| Size | 4,211 Kb |
| Views | 56,672 |
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!
Gregor Adams (pixelass) Script Codes
| Name | Size |
| Cantor Set in CSS | 2,143 Kb |
| Pure CSS marching ants border | 3,837 Kb |
| Flat webpage concept | 12,434 Kb |
| Pager-dots concept | 4,731 Kb |
| Netfix logo animation CSS | 10,303 Kb |
| Morphing search input | 3,250 Kb |
| Fractal curve generator | 13,870 Kb |
| Text stroke helpers for SCSS | 5,647 Kb |
| Material design upload button with progress | 3,374 Kb |
| RubiCSS cube | 12,148 Kb |
Create amazing marketing copy 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!
Similar Scripts & Codes
| Name | Username | Size |
| Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
| ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
| Fixed with using Calc | Tomleo | 2,542 Kb |
| Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
| Ocean | Gordonnl | 2,817 Kb |
| Filtering with shuffle.js | Deyand | 2,712 Kb |
| SVG hamburger menu button | Elifitch | 2,602 Kb |
| CSS3 Button Examples | Volusion | 3,377 Kb |
| A Pen by Sooba | Sooba | 2,516 Kb |
| Header | Er40 | 1,542 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!