Pure custom css animation on new google logo

Developer
Robert Borghesi
Size
3,362 Kb
Views
42,504
  1. Pure custom css animation on new google logo Previews
  2. Pure custom css animation on new google logo HTML Codes
  3. Pure custom css animation on new google logo CSS Codes

How do I make an pure custom css animation on new google logo?

Custom animation on the new google logo, based on one of my old pen. It's pure CSS, no JS is allowed here :). What is a pure custom css animation on new google logo? How do you make a pure custom css animation on new google logo? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Pure custom css animation on new google logo Previews
IQ Test

Pure custom css animation on new google logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure custom css animation on new google logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="G letter">G</div> <div class="o letter">o</div> <div class="o letter">o</div> <div class="g letter">g</div> <div class="l letter">l</div> <div class="e letter">e</div>
</div>
</body>
</html>

Pure custom css animation on new google logo - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
body { width: 100%; height: 100%; text-align: center; background: #F2EDF0;
}
.container { overflow: hidden; height: 150px; width: 500px; padding-top: 30px; display: inline-block; position: relative; top: 150px;
}
.letter { display: inline-block; font-family: "Montserrat Alternates", sans-serif; font-size: 140px; color: #3c3c3c; -webkit-text-stroke: 0px #282828; position: relative; z-index: 1; top: 0px; line-height: 120px; top: 0px; margin-right: -10px; -webkit-transform: translate3d(0, 150px, 0); -moz-transform: translate3d(0, 150px, 0); -ms-transform: translate3d(0, 150px, 0); transform: translate3d(0, 150px, 0);
}
.G:after { content: "G"; font-size: 140px; color: #4285f4;
}
.g:after { content: "g"; font-size: 140px; color: #4285f4;
}
.o:after { content: "o"; font-size: 140px; color: #ea4335;
}
.o:nth-of-type(3):after { color: #fbbc05;
}
.l:after { content: "l"; font-size: 140px; color: #34a853;
}
.e:after { content: "e"; font-size: 140px; color: #ea4335;
}
.G:after, .o:after, .g:after, .e:after, .l:after { position: absolute; left: 0; top: 0px; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; transition: all 1s; opacity: 1; z-index: 100;
}
.letter:nth-child(1) { animation-delay: 1.1s; -webkit-animation-delay: 1.1s;
}
.letter:nth-child(1):after { animation-delay: 2.7s; -webkit-animation-delay: 2.7s;
}
.letter:nth-child(2) { animation-delay: 1.2s; -webkit-animation-delay: 1.2s;
}
.letter:nth-child(2):after { animation-delay: 2.9s; -webkit-animation-delay: 2.9s;
}
.letter:nth-child(3) { animation-delay: 1.3s; -webkit-animation-delay: 1.3s;
}
.letter:nth-child(3):after { animation-delay: 3.1s; -webkit-animation-delay: 3.1s;
}
.letter:nth-child(4) { animation-delay: 1.4s; -webkit-animation-delay: 1.4s;
}
.letter:nth-child(4):after { animation-delay: 3.3s; -webkit-animation-delay: 3.3s;
}
.letter:nth-child(5) { animation-delay: 1.5s; -webkit-animation-delay: 1.5s;
}
.letter:nth-child(5):after { animation-delay: 3.5s; -webkit-animation-delay: 3.5s;
}
.letter:nth-child(6) { animation-delay: 1.6s; -webkit-animation-delay: 1.6s;
}
.letter:nth-child(6):after { animation-delay: 3.7s; -webkit-animation-delay: 3.7s;
}
.letter:nth-child(7) { animation-delay: 1.7s; -webkit-animation-delay: 1.7s;
}
.letter:nth-child(7):after { animation-delay: 3.9s; -webkit-animation-delay: 3.9s;
}
.letter { -webkit-animation: show 0.3s 4s 1 ease-out forwards; -moz-animation: show 0.3s 4s 1 ease-out forwards; -o-animation: show 0.3s 4s 1 ease-out forwards; animation: show 0.3s 4s 1 ease-out forwards;
}
.letter:after { -webkit-animation: up 1s 1 ease-out forwards; -moz-animation: up 1s 1 ease-out forwards; -o-animation: up 1s 1 ease-out forwards; animation: up 1s 1 ease-out forwards;
}
@keyframes show { 100% { -webkit-transform: translate3d(0, 0px, 0); -moz-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); }
}
@keyframes up { 30% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); } 60% { -webkit-transform: translate3d(0, -4px, 0); -moz-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } 80% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); -moz-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); }
}
@-webkit-keyframes show { 100% { -webkit-transform: translate3d(0, 0px, 0); -moz-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); }
}
@-webkit-keyframes up { 30% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); } 60% { -webkit-transform: translate3d(0, -4px, 0); -moz-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } 80% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); -moz-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -ms-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); }
}
Pure custom css animation on new google logo - Script Codes
Pure custom css animation on new google logo - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 4
Size 3,362 Kb
Views 42,504
Do you need developer help for Pure custom css animation on new google logo?

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!

Robert Borghesi (dghez) Script Codes
Name
Gradient border on hover - Scorer of fifa world cup
Best 3 players on fifa 14 - HOVER THEM
Hover otating cards folder of OnePiece characters
Animated title moving on scroll
Anaglyph 3D with CSS-blend on mouseMove
Fullscreen slice hero slider
Enel brand - logo animation with tweenmax
Simple PureCss dropdown menu with following subnav
Css Rotating 3d cubes different speed
Continuous register clean form with autoresize input
Create amazing Facebook ads 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!