Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
gmail_enter_animation
<!DOCTYPE html>
<html lang="uk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gmail</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="google" value="notranslate">
<meta name="application-name" content="Gmail">
<meta name="description" content="Електронна пошта в стилі Google">
<meta name="application-url" content="https://mail.google.com/mail/u/0">
<!-- <meta name="google" content="notranslate"> -->
<!-- <link rel="canonical" href="https://mail.google.com/mail/"/> -->
<link rel="shortcut icon" href="https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico" type="image/x-icon">
<style nonce="PPPr84M/F0bToxIow0ruqPZXBPM">
body {
margin: 0;
width: 100%;
height: 100%
}
body, td, input, textarea, select {
font-family: arial, sans-serif
}
input, textarea, select {
font-size: 100%
}
#loading {
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #fff
}
.msg {
color: #757575;
font: 20px/20px Arial, sans-serif;
letter-spacing: .2px;
text-align: center
}
#nlpt {
animation: a-s .5s 2.5s 1 forwards;
background-color: #f1f1f1;
height: 4px;
margin: 56px auto 20px;
opacity: 0;
overflow: hidden;
position: relative;
width: 300px
}
#nlpt::before {
animation: a-lb 20s 3s linear forwards;
background-color: #db4437;
content: '';
display: block;
height: 100%;
position: absolute;
transform: translateX(-300px);
width: 100%
}
@keyframes a-lb {
0% {
transform: translateX(-300px)
}
5% {
transform: translateX(-240px)
}
15% {
transform: translateX(-30px)
}
25% {
transform: translateX(-30px)
}
30% {
transform: translateX(-20px)
}
45% {
transform: translateX(-20px)
}
50% {
transform: translateX(-15px)
}
65% {
transform: translateX(-15px)
}
70% {
transform: translateX(-10px)
}
95% {
transform: translateX(-10px)
}
100% {
transform: translateX(-5px)
}
}
@keyframes a-s {
100% {
opacity: 1
}
}
@keyframes a-h {
100% {
opacity: 0
}
}
@keyframes a-nt {
100% {
transform: none
}
}
@keyframes a-e {
43% {
animation-timing-function: cubic-bezier(.8, 0, .2, 1);
transform: scale(.75)
}
60% {
animation-timing-function: cubic-bezier(.8, 0, 1, 1);
transform: translateY(-16px)
}
77% {
animation-timing-function: cubic-bezier(.16, 0, .2, 1);
transform: none
}
89% {
animation-timing-function: cubic-bezier(.8, 0, 1, 1);
transform: translateY(-5px)
}
100% {
transform: none
}
}
@keyframes a-ef {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
transform: scaleY(.42)
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
transform: scaleY(.98)
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
transform: scaleY(.96)
}
100% {
transform: none
}
}
@keyframes a-efs {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
opacity: .3
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
opacity: .03
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
opacity: .05
}
100% {
opacity: 0
}
}
@keyframes a-es {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
transform: rotate(-25deg)
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
transform: rotate(-42.5deg)
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
transform: rotate(-42deg)
}
100% {
transform: rotate(-43deg)
}
}
.invfr {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 0;
height: 0;
border: 0
}
.msgb {
position: absolute;
right: 0;
font-size: 12px;
font-weight: normal;
color: #000;
padding: 20px
}
</style>
<style nonce="PPPr84M/F0bToxIow0ruqPZXBPM">
.submit_as_link {
border: none;
background: none;
color: blue;
text-decoration: underline;
cursor: pointer;
margin: 0;
padding: 0;
}
.submit_as_link:active {
color: red;
outline: 0
}
</style>
</head>
<body jscontroller="Gz34U">
<div id="loading">
<div style="bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0">
<div style="animation:a-h .5s 1.25s 1 linear forwards,a-nt .6s 1.25s 1 cubic-bezier(0,0,.2,1);background:#eee;border-radius:50%;height:800px;left:50%;margin:-448px -400px 0;position:absolute;top:50%;transform:scale(0);width:800px"></div>
</div>
<div style="height:100%;text-align:center">
<div style="height:50%;margin:0 0 -140px"></div>
<div style="height:128px;margin:0 auto;position:relative;width:176px">
<div style="animation:a-s .5s .5s 1 linear forwards,a-e 1.75s .5s 1 cubic-bezier(0,0,.67,1) forwards;opacity:0;transform:scale(.68)">
<div style="background:#ddd;border-radius:12px;box-shadow:0 15px 15px -15px rgba(0,0,0,.3);height:128px;left:0;overflow:hidden;position:absolute;top:0;transform:scale(1);width:176px">
<div style="animation:a-nt .667s 1.5s 1 cubic-bezier(.4,0,.2,1) forwards;background:#d23f31;border-radius:50%;height:270px;left:88px;margin:-135px;position:absolute;top:25px;transform:scale(.5);width:270px"></div>
<div style="height:128px;left:20px;overflow:hidden;position:absolute;top:0;transform:scale(1);width:136px">
<div style="background:#e1e1e1;height:128px;left:0;position:absolute;top:0;width:68px">
<div style="animation:a-h .25s 1.25s 1 forwards;background:#eee;height:128px;left:0;opacity:1;position:absolute;top:0;width:68px"></div>
</div>
<div style="background:#eee;height:100px;left:1px;position:absolute;top:56px;transform:scaleY(.73)rotate(135deg);width:200px"></div>
</div>
<div style="background:#bbb;height:176px;left:0;position:absolute;top:-100px;transform:scaleY(.73)rotate(135deg);width:176px">
<div style="background:#eee;border-radius:12px 12px 0 0;bottom:117px;height:12px;left:55px;position:absolute;transform:rotate(-135deg)scaleY(1.37);width:136px"></div>
<div style="background:#eee;height:96px;position:absolute;right:0;top:0;width:96px"></div>
<div style="box-shadow:inset 0 0 10px #888;height:155px;position:absolute;right:0;top:0;width:155px"></div>
</div>
<div style="animation:a-s .167s 1.283s 1 linear forwards,a-es 1.184s 1.283s 1 cubic-bezier(.4,0,.2,1) forwards;background:linear-gradient(0,rgba(38,38,38,0),rgba(38,38,38,.2));height:225px;left:0;opacity:0;position:absolute;top:0;transform:rotate(-43deg);transform-origin:0 13px;width:176px"></div>
</div>
<div style="animation:a-ef 1.184s 1.283s 1 cubic-bezier(.4,0,.2,1) forwards;border-radius:12px;height:100px;left:0;overflow:hidden;position:absolute;top:0;transform:scaleY(1);transform-origin:top;width:176px">
<div style="height:176px;left:0;position:absolute;top:-100px;transform:scaleY(.73)rotate(135deg);width:176px">
<div style="animation:a-s .167s 1.283s 1 linear forwards;box-shadow:-5px 0 12px rgba(0,0,0,.5);height:176px;left:0;opacity:0;position:absolute;top:0;width:176px"></div>
<div style="background:#ddd;height:176px;left:0;overflow:hidden;position:absolute;top:0;width:176px">
<div style="animation:a-nt .667s 1.25s 1 cubic-bezier(.4,0,.2,1) forwards;background:#db4437;border-radius:50%;bottom:41px;height:225px;left:41px;position:absolute;transform:scale(0);width:225px"></div>
<div style="background:#f1f1f1;height:128px;left:24px;position:absolute;top:24px;transform:rotate(90deg);width:128px"></div>
<div style="animation:a-efs 1.184s 1.283s 1 cubic-bezier(.4,0,.2,1) forwards;background:#fff;height:176px;opacity:0;transform:rotate(90deg);width:176px"></div>
</div>
</div>
</div>
</div>
</div>
<div id="nlpt" style="display: none;"></div>
<div style="animation:a-s .25s 1.25s 1 forwards;opacity:0; display: none;" class="msg">Dmytrii Lysak</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.