Lysak/gmail_enter_animation.html

## gmail_enter_animation.html
<!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>
	<!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>