Gmail Icon Animation

Developer
Rachel McGrane
Size
3,424 Kb
Views
34,408
  1. Gmail Icon Animation Previews
  2. Gmail Icon Animation HTML Codes
  3. Gmail Icon Animation CSS Codes

How do I make an gmail icon animation?

The new iOS Gmail app's intro animation. What is a gmail icon animation? How do you make a gmail icon animation? This script and codes were developed by Rachel McGrane on 12 September 2022, Monday.

Gmail Icon Animation Previews
IQ Test

Gmail Icon Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gmail Icon Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<div class="envelope"> <div class="flap-wrap"> <div class="flap"></div> </div> <div class="shadow"></div>
</div>
</div>
</body>
</html>

Gmail Icon Animation - Script Codes CSS Codes

* { box-sizing: border-box;
}
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff;
}
.wrapper { -webkit-animation: rise 1s cubic-bezier(0.15, 0.48, 0.07, 0.9) infinite alternate; animation: rise 1s cubic-bezier(0.15, 0.48, 0.07, 0.9) infinite alternate;
}
.envelope { width: 445px; height: 325px; border-radius: 30px; background: -webkit-linear-gradient(305deg, #e3e3e3 0%, #e3e3e3 57%, #fff 57%, #fff 57.5%, #efefef 57.5%, #efefef 100%); background: linear-gradient(145deg, #e3e3e3 0%, #e3e3e3 57%, #fff 57%, #fff 57.5%, #efefef 57.5%, #efefef 100%); position: relative; overflow: hidden; -webkit-animation: hop 1s 0.4s cubic-bezier(0.15, 0.48, 0.07, 0.9) infinite alternate; animation: hop 1s 0.4s cubic-bezier(0.15, 0.48, 0.07, 0.9) infinite alternate;
}
.envelope::before { content: ""; position: absolute; top: 0; left: 0; border-radius: 30px 0 0 30px; background: #d35145; width: 50px; height: 100%; z-index: 1;
}
.envelope::after { content: ""; position: absolute; top: 0; right: 0; border-radius: 0 30px 30px 0; background: #c33c2c; width: 50px; height: 100%; z-index: 1;
}
.flap-wrap { -webkit-animation: lift 1s cubic-bezier(0.06, 0.59, 0.02, 0.97) infinite alternate; animation: lift 1s cubic-bezier(0.06, 0.59, 0.02, 0.97) infinite alternate; position: relative; z-index: 1000;
}
.flap { width: 0; height: 0; border-left: 295px solid transparent; border-right: 287px solid transparent; border-top: 200px solid #f3f3f3; position: relative; z-index: 100; margin-left: -65px; -webkit-animation: lift-2 1s 0.4s cubic-bezier(0.06, 0.5, 0.02, 0.5) infinite alternate; animation: lift-2 1s 0.4s cubic-bezier(0.06, 0.5, 0.02, 0.5) infinite alternate;
}
.flap::before { content: ""; position: absolute; top: -130px; left: -260px; width: 300px; height: 50px; background: #d35145; z-index: 200; border-radius: 30px 30px 0 30px; -webkit-transform: rotate(34deg); transform: rotate(34deg); border-bottom: 2px solid #b9382c;
}
.flap::after { content: ""; position: absolute; top: -130px; left: -40px; width: 300px; height: 50px; background: #d35145; z-index: 200; border-radius: 30px 30px 30px 0; -webkit-transform: rotate(-34deg); transform: rotate(-34deg); border-bottom: 2px solid #b9382c;
}
.shadow { width: 600px; height: 325px; background: -webkit-linear-gradient(left, black, transparent); background: linear-gradient(90deg, black, transparent); position: absolute; top: -77px; left: 0; z-index: 50; -webkit-transform: rotate(40deg); transform: rotate(40deg); opacity: .1;
}
@-webkit-keyframes lift { from { -webkit-transform: scale3d(1, 0.8, 0.1) translateY(-25px); transform: scale3d(1, 0.8, 0.1) translateY(-25px); -webkit-filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1)); border-top-color: #f3f3f3; } to { -webkit-transform: scale3d(1, 1, 1) translateY(0); transform: scale3d(1, 1, 1) translateY(0); -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); border-top-color: #eaeaea; }
}
@keyframes lift { from { -webkit-transform: scale3d(1, 0.8, 0.1) translateY(-25px); transform: scale3d(1, 0.8, 0.1) translateY(-25px); -webkit-filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1)); border-top-color: #f3f3f3; } to { -webkit-transform: scale3d(1, 1, 1) translateY(0); transform: scale3d(1, 1, 1) translateY(0); -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); border-top-color: #eaeaea; }
}
@-webkit-keyframes lift-2 { 0% { -webkit-transform: scale3d(1, 0.8, 0.1) translateY(-25px); transform: scale3d(1, 0.8, 0.1) translateY(-25px); -webkit-filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1)); border-top-color: #f3f3f3; } 100% { -webkit-transform: scale3d(1, 1, 1) translateY(0); transform: scale3d(1, 1, 1) translateY(0); -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); border-top-color: #eaeaea; }
}
@keyframes lift-2 { 0% { -webkit-transform: scale3d(1, 0.8, 0.1) translateY(-25px); transform: scale3d(1, 0.8, 0.1) translateY(-25px); -webkit-filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1)); border-top-color: #f3f3f3; } 100% { -webkit-transform: scale3d(1, 1, 1) translateY(0); transform: scale3d(1, 1, 1) translateY(0); -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); border-top-color: #eaeaea; }
}
@-webkit-keyframes rise { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes rise { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-webkit-keyframes hop { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-15px); transform: translateY(-15px); }
}
@keyframes hop { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-15px); transform: translateY(-15px); }
}
Gmail Icon Animation - Script Codes
Gmail Icon Animation - Script Codes
Home Page Home
Developer Rachel McGrane
Username rachelmcgrane
Uploaded September 12, 2022
Rating 3
Size 3,424 Kb
Views 34,408
Do you need developer help for Gmail Icon 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!

Rachel McGrane (rachelmcgrane) Script Codes
Name
Data Input Form
Greensock Light Switch
Ship Name Lookup
Site Header
Rainbow Preloader with Offset-Path
Pride Flags
A Pen by Rachel McGrane
Audio Player WIP
Bumble Coming Soon Page
Wireframe Concept
Create amazing video scripts 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!