In today’s blog we will make a sign up form animation with the help of html css and js. So how will this animation work? When you enter your email id in the input box and click on the sign up button, then all your email letters will be enclosed in a cage and the shark will eat them. So this animation will work like this, it is a bit different but amazing.
Here is the html code of the animation,
01. HTML Code :-
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Codejuster - sign up shark animation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="wrap">
<form id="bounce" autocomplete="off">
<input type="email" id="email" maxlength='25' required/>
<input type="submit" id="submit" value="SIGN UP"/>
</form>
<div id="fakeform">
<p id="wrapper">
<span class="cursor"></span>
</p>
</div>
<svg id='bouncehouse' viewbox='0 0 1000 800'>
<defs>
<marker id="cap" markerheight="20" markerwidth="20" refx="70" refy="40" orient="auto-start-reverse" viewbox="0 0 800 800">
<g transform="rotate(90,90,90), translate(0,50)">
<g>
<path d="M 60 60 Q 40 70 20 60 Q 10 40 20 20 Q 40 10 60 20 Q 70 40 60 60 "></path>
</g>
</g>
</marker>
</defs>
<g transform="translate(100, 0)">
<path id="base" d="M 90 450 L 710 450 "></path>
<path id="bottom" d="M 90 450 L 710 450 "></path>
<path id="top" d="M 400 350 C 280 350 190 350 90 350 L 90 450 L 710 450 L 710 350 C 620 350 530 350 400 350 " marker-end="url(#cap)" marker-start="url(#cap)"></path>
<path id="slide" d="M 740 400 Q 590 400 520 400 "></path>
</g>
</svg>
<div class="shark">
<div class="inner">
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
and then we will add CSS in HTML,
02. CSS Code :-
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
@font-face {
font-family: "Balloon-Base";
src: url("https://assets.codepen.io/1385231/Balloon+Base.otf");
}
body {
display: grid;
place-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #fff;
}
body * {
box-sizing: border-box;
}
body.sliding #bounce input#submit {
transition: opacity 0.2s ease-in-out;
opacity: 0;
}
body.sliding #wrap {
background-position: 50% 600px;
box-shadow: inset 0 0 0 0 #fff;
-webkit-animation: bounce2 0.5s ease-in-out 10 alternate 0.3s;
animation: bounce2 0.5s ease-in-out 10 alternate 0.3s;
}
@-webkit-keyframes bounce2 {
to {
background-size: 225px 725px;
}
}
@keyframes bounce2 {
to {
background-size: 225px 725px;
}
}
body.sliding #wrap:before {
transform: scale(0);
}
body.sliding #wrap .shark:before {
transform: scaleX(1);
transition-delay: 3.25s;
}
body.sliding #wrap .shark .inner {
transform: translateY(0);
transition-delay: 3.5s;
}
body.sliding #wrap .shark .inner:before, body.sliding #wrap .shark .inner:after {
transition-delay: 0s;
height: 60px;
transform: translateY(0px);
background: #000;
}
body.sliding #wrap .shark .inner:after {
background: #fff;
}
body.sliding #fakeform:before {
transition: -webkit-clip-path 0.3s ease-in-out;
transition: clip-path 0.3s ease-in-out;
transition: clip-path 0.3s ease-in-out, -webkit-clip-path 0.3s ease-in-out;
transform: translateY(0);
transition-delay: 0.3s;
opacity: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body.sliding #fakeform p {
transform: translateX(35px);
}
body.sliding #fakeform p > span {
-webkit-animation-play-state: running;
animation-play-state: running;
}
body.sliding #fakeform p > span:last-of-type:after {
display: none;
}
body.sliding #fakeform p > span > span {
-webkit-animation-play-state: running;
animation-play-state: running;
}
body.sliding #fakeform p > span > span:before {
-webkit-animation-play-state: running;
animation-play-state: running;
}
body.sliding svg {
transform: translateY(25px);
}
body.sliding svg marker path {
fill: #1bea08;
}
body.sliding svg path#slide {
d: path("M 740 620 Q 520 620 520 430 ");
stroke: #fff;
transform: translate(50px, -50px);
transition-delay: 0.2s;
}
body.sliding svg path#bottom {
stroke: #5dd426;
stroke-width: 120;
transform: translateY(50px);
transition-delay: 0.2s;
transition-duration: 0.5s;
}
body.sliding svg path#base {
stroke: #08ea1b;
stroke-width: 140;
transform: translateY(100px);
transition-delay: 0.3s;
transition-duration: 0.75s;
}
body.sliding svg path#top, body.sliding svg path#mid {
stroke: #15622b;
d: path("M 60 130 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 740 130 ");
stroke-width: 100;
-webkit-animation: waving 0.35s ease-in-out 2.5 alternate forwards 0.3s;
animation: waving 0.35s ease-in-out 2.5 alternate forwards 0.3s;
}
@-webkit-keyframes waving {
to {
d: path("M 120 120 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 680 120 ");
}
}
@keyframes waving {
to {
d: path("M 120 120 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 680 120 ");
}
}
body .shark {
position: absolute;
width: 200px;
height: 200px;
right: -150px;
bottom: -350px;
overflow: hidden;
z-index: 99;
}
body .shark:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background: #000;
transition: 0.3s ease-in-out;
transition-delay: 1.5s;
z-index: 9;
transform: scaleX(0);
}
body .shark .inner {
position: absolute;
width: 150px;
height: 100%;
left: 100px;
top: 0;
background: radial-gradient(ellipse at center, #fff 1px, #000 1px, #000 3px, transparent 5px) 50px 50%/10px 20px no-repeat, radial-gradient(ellipse at bottom left, #fff 45px, #fff 45px, #efefef 55px, transparent 55px) 0px 100%/100px 250px no-repeat, radial-gradient(ellipse at bottom left, transparent 45px, #ccc 45px, #ccc 75px, transparent 75px) 0px calc(100% + 2.5px)/95px 250px no-repeat;
-webkit-box-reflect: left -2px;
transition: 0.4s ease-in-out;
transition-delay: 1s;
transform: translateY(100%);
}
body .shark .inner:before, body .shark .inner:after {
content: "";
position: absolute;
width: 80px;
border-radius: 40px 40px 20px 20px/50px 50px 20px 20px;
background: #000;
box-shadow: 0 0 0 3px #F43F5E;
bottom: 20px;
left: -40px;
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.005);
height: 2px;
transform: translateY(-35px);
background: #000;
}
body .shark .inner:after {
-webkit-clip-path: polygon(1% 33%, 15% 51%, 17% 15%, 31% 46%, 42% 6%, 47% 45%, 60% 8%, 65% 44%, 80% 14%, 81% 47%, 99% 31%, 100% 79%, 88% 75%, 84% 94%, 70% 81%, 66% 94%, 53% 81%, 44% 94%, 34% 79%, 25% 93%, 16% 79%, 8% 91%, 0% 85%, 1% 100%, 99% 100%, 99% 0%, 2% 0%);
clip-path: polygon(1% 33%, 15% 51%, 17% 15%, 31% 46%, 42% 6%, 47% 45%, 60% 8%, 65% 44%, 80% 14%, 81% 47%, 99% 31%, 100% 79%, 88% 75%, 84% 94%, 70% 81%, 66% 94%, 53% 81%, 44% 94%, 34% 79%, 25% 93%, 16% 79%, 8% 91%, 0% 85%, 1% 100%, 99% 100%, 99% 0%, 2% 0%);
}
body svg {
position: absolute;
width: 1000px;
height: 800px;
top: calc(50% - 400px);
left: calc(50% - 500px);
transition: 0.5s ease-in-out;
z-index: 1;
}
body svg marker path {
stroke-width: 0;
}
body svg path {
stroke-width: 5;
fill: transparent;
stroke: #000;
stroke-linecap: round;
stroke-linejoin: round;
transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.075);
stroke: green;
}
body svg path#slide {
stroke-width: 105;
stroke-linecap: butt;
}
body #fakeform {
height: 100%;
width: 100%;
position: absolute;
z-index: 100;
top: 0;
font-family: "IBM Plex Mono", monospace;
pointer-events: none;
}
body #fakeform:before {
transform-style: preserve-3d;
content: "";
width: calc(100% - 50px);
left: 25px;
height: 250px;
background: radial-gradient(circle at bottom, transparent 53px, #F43F5E 53px, #F43F5E 60px, transparent 60px) -376px 100%/100% 450px, repeating-linear-gradient(45deg, #EAB308 5px, transparent 5px, transparent 25px, #EAB308 25px, #EAB308 30px), repeating-linear-gradient(-45deg, #EAB308 5px, transparent 5px, transparent 25px, #EAB308 25px, #EAB308 30px);
position: absolute;
top: -160px;
z-index: 9;
box-shadow: inset 0 10px 0 0 #F43F5E, inset -10px 0 0 #F43F5E, inset 10px 0 0 #F43F5E;
border-radius: 10px;
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
transition: opacity 0.2s ease-in-out;
opacity: 0;
transform: translateY(-150px);
-webkit-mask: radial-gradient(circle at bottom, transparent 53px, #000 53px) -376px 100%/100% 450px;
mask: radial-gradient(circle at bottom, transparent 53px, #000 53px) -376px 100%/100% 450px;
}
body #fakeform p {
height: 100%;
position: absolute;
top: -415px;
left: -75px;
font-size: 24px;
transition: 0.2s ease-in-out;
}
body #fakeform p > span {
width: 15px;
position: absolute;
offset-distance: 100%;
offset-path: path("M 690 620 Q 520 620 520 430 L 80 430 ");
color: transparent;
-webkit-animation: slide 2s ease-in 1 forwards;
animation: slide 2s ease-in 1 forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
transform: scaleY(-1) scaleX(-1);
--height:1;
--flip:0;
--flipx:1;
}
body #fakeform p > span > span {
-webkit-animation: bounce calc(0.45s * var(--height)) ease-in-out 6 alternate;
animation: bounce calc(0.45s * var(--height)) ease-in-out 6 alternate;
-webkit-animation-play-state: paused;
animation-play-state: paused;
display: inline-block;
position: absolute;
width: 15px;
height: 15px;
left: 50%;
top: 50%;
color: transparent;
transform: translate(-50%, -50%);
perspective: 500px;
}
body #fakeform p > span > span:before {
content: attr(data-char);
color: #000;
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
-webkit-animation: flip calc(0.45s * var(--height)) ease-in-out 5, tumble 0.5s ease-in-out infinite;
animation: flip calc(0.45s * var(--height)) ease-in-out 5, tumble 0.5s ease-in-out infinite;
transform: rotate(0deg) translate(-50%, -50%);
transform-style: preserve-3d;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes tumble {
from {
transform-origin: -5px 50%;
transform: rotate(0deg) translate(-50%, -50%);
}
to {
transform-origin: -5px 50%;
transform: rotate(360deg) translate(-50%, -50%);
}
}
@keyframes tumble {
from {
transform-origin: -5px 50%;
transform: rotate(0deg) translate(-50%, -50%);
}
to {
transform-origin: -5px 50%;
transform: rotate(360deg) translate(-50%, -50%);
}
}
@-webkit-keyframes flip {
0% {
transform: rotateX(0deg) rotate(0deg) translate(-50%, -50%);
}
100% {
transform: rotateX(calc(360deg * var(--flipx))) rotate(calc(360deg * var(--flip))) translate(-50%, -50%);
}
}
@keyframes flip {
0% {
transform: rotateX(0deg) rotate(0deg) translate(-50%, -50%);
}
100% {
transform: rotateX(calc(360deg * var(--flipx))) rotate(calc(360deg * var(--flip))) translate(-50%, -50%);
}
}
body #fakeform p > span:nth-of-type(2n) {
--height:1.15;
}
body #fakeform p > span:nth-of-type(3n) {
--height:1.25;
}
body #fakeform p > span:nth-of-type(4n) {
--height:0.75;
--flip:-1;
}
body #fakeform p > span:nth-of-type(even) {
--flip:1;
--flipx:0;
}
body #fakeform p > span:nth-of-type(1) {
offset-distance: calc(100% - 15px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.05s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.05s * var(--height)));
}
body #fakeform p > span:nth-of-type(1) > span {
-webkit-animation-delay: calc(0.05s * var(--height));
animation-delay: calc(0.05s * var(--height));
}
body #fakeform p > span:nth-of-type(1) > span:before {
-webkit-animation-delay: calc(0.05s * var(--height)), calc(0.05s * var(--height) + 3s);
animation-delay: calc(0.05s * var(--height)), calc(0.05s * var(--height) + 3s);
}
@-webkit-keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@-webkit-keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(2) {
offset-distance: calc(100% - 30px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.1s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.1s * var(--height)));
}
body #fakeform p > span:nth-of-type(2) > span {
-webkit-animation-delay: calc(0.1s * var(--height));
animation-delay: calc(0.1s * var(--height));
}
body #fakeform p > span:nth-of-type(2) > span:before {
-webkit-animation-delay: calc(0.1s * var(--height)), calc(0.1s * var(--height) + 3s);
animation-delay: calc(0.1s * var(--height)), calc(0.1s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(3) {
offset-distance: calc(100% - 45px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.15s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.15s * var(--height)));
}
body #fakeform p > span:nth-of-type(3) > span {
-webkit-animation-delay: calc(0.15s * var(--height));
animation-delay: calc(0.15s * var(--height));
}
body #fakeform p > span:nth-of-type(3) > span:before {
-webkit-animation-delay: calc(0.15s * var(--height)), calc(0.15s * var(--height) + 3s);
animation-delay: calc(0.15s * var(--height)), calc(0.15s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(4) {
offset-distance: calc(100% - 60px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.2s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.2s * var(--height)));
}
body #fakeform p > span:nth-of-type(4) > span {
-webkit-animation-delay: calc(0.2s * var(--height));
animation-delay: calc(0.2s * var(--height));
}
body #fakeform p > span:nth-of-type(4) > span:before {
-webkit-animation-delay: calc(0.2s * var(--height)), calc(0.2s * var(--height) + 3s);
animation-delay: calc(0.2s * var(--height)), calc(0.2s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(5) {
offset-distance: calc(100% - 75px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.25s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.25s * var(--height)));
}
body #fakeform p > span:nth-of-type(5) > span {
-webkit-animation-delay: calc(0.25s * var(--height));
animation-delay: calc(0.25s * var(--height));
}
body #fakeform p > span:nth-of-type(5) > span:before {
-webkit-animation-delay: calc(0.25s * var(--height)), calc(0.25s * var(--height) + 3s);
animation-delay: calc(0.25s * var(--height)), calc(0.25s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(6) {
offset-distance: calc(100% - 90px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.3s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.3s * var(--height)));
}
body #fakeform p > span:nth-of-type(6) > span {
-webkit-animation-delay: calc(0.3s * var(--height));
animation-delay: calc(0.3s * var(--height));
}
body #fakeform p > span:nth-of-type(6) > span:before {
-webkit-animation-delay: calc(0.3s * var(--height)), calc(0.3s * var(--height) + 3s);
animation-delay: calc(0.3s * var(--height)), calc(0.3s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(7) {
offset-distance: calc(100% - 105px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.35s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.35s * var(--height)));
}
body #fakeform p > span:nth-of-type(7) > span {
-webkit-animation-delay: calc(0.35s * var(--height));
animation-delay: calc(0.35s * var(--height));
}
body #fakeform p > span:nth-of-type(7) > span:before {
-webkit-animation-delay: calc(0.35s * var(--height)), calc(0.35s * var(--height) + 3s);
animation-delay: calc(0.35s * var(--height)), calc(0.35s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(8) {
offset-distance: calc(100% - 120px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.4s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.4s * var(--height)));
}
body #fakeform p > span:nth-of-type(8) > span {
-webkit-animation-delay: calc(0.4s * var(--height));
animation-delay: calc(0.4s * var(--height));
}
body #fakeform p > span:nth-of-type(8) > span:before {
-webkit-animation-delay: calc(0.4s * var(--height)), calc(0.4s * var(--height) + 3s);
animation-delay: calc(0.4s * var(--height)), calc(0.4s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(9) {
offset-distance: calc(100% - 135px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.45s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.45s * var(--height)));
}
body #fakeform p > span:nth-of-type(9) > span {
-webkit-animation-delay: calc(0.45s * var(--height));
animation-delay: calc(0.45s * var(--height));
}
body #fakeform p > span:nth-of-type(9) > span:before {
-webkit-animation-delay: calc(0.45s * var(--height)), calc(0.45s * var(--height) + 3s);
animation-delay: calc(0.45s * var(--height)), calc(0.45s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(10) {
offset-distance: calc(100% - 150px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.5s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.5s * var(--height)));
}
body #fakeform p > span:nth-of-type(10) > span {
-webkit-animation-delay: calc(0.5s * var(--height));
animation-delay: calc(0.5s * var(--height));
}
body #fakeform p > span:nth-of-type(10) > span:before {
-webkit-animation-delay: calc(0.5s * var(--height)), calc(0.5s * var(--height) + 3s);
animation-delay: calc(0.5s * var(--height)), calc(0.5s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(11) {
offset-distance: calc(100% - 165px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.55s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.55s * var(--height)));
}
body #fakeform p > span:nth-of-type(11) > span {
-webkit-animation-delay: calc(0.55s * var(--height));
animation-delay: calc(0.55s * var(--height));
}
body #fakeform p > span:nth-of-type(11) > span:before {
-webkit-animation-delay: calc(0.55s * var(--height)), calc(0.55s * var(--height) + 3s);
animation-delay: calc(0.55s * var(--height)), calc(0.55s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(12) {
offset-distance: calc(100% - 180px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.6s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.6s * var(--height)));
}
body #fakeform p > span:nth-of-type(12) > span {
-webkit-animation-delay: calc(0.6s * var(--height));
animation-delay: calc(0.6s * var(--height));
}
body #fakeform p > span:nth-of-type(12) > span:before {
-webkit-animation-delay: calc(0.6s * var(--height)), calc(0.6s * var(--height) + 3s);
animation-delay: calc(0.6s * var(--height)), calc(0.6s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(13) {
offset-distance: calc(100% - 195px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.65s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.65s * var(--height)));
}
body #fakeform p > span:nth-of-type(13) > span {
-webkit-animation-delay: calc(0.65s * var(--height));
animation-delay: calc(0.65s * var(--height));
}
body #fakeform p > span:nth-of-type(13) > span:before {
-webkit-animation-delay: calc(0.65s * var(--height)), calc(0.65s * var(--height) + 3s);
animation-delay: calc(0.65s * var(--height)), calc(0.65s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(14) {
offset-distance: calc(100% - 210px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.7s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.7s * var(--height)));
}
body #fakeform p > span:nth-of-type(14) > span {
-webkit-animation-delay: calc(0.7s * var(--height));
animation-delay: calc(0.7s * var(--height));
}
body #fakeform p > span:nth-of-type(14) > span:before {
-webkit-animation-delay: calc(0.7s * var(--height)), calc(0.7s * var(--height) + 3s);
animation-delay: calc(0.7s * var(--height)), calc(0.7s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(15) {
offset-distance: calc(100% - 225px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.75s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.75s * var(--height)));
}
body #fakeform p > span:nth-of-type(15) > span {
-webkit-animation-delay: calc(0.75s * var(--height));
animation-delay: calc(0.75s * var(--height));
}
body #fakeform p > span:nth-of-type(15) > span:before {
-webkit-animation-delay: calc(0.75s * var(--height)), calc(0.75s * var(--height) + 3s);
animation-delay: calc(0.75s * var(--height)), calc(0.75s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(16) {
offset-distance: calc(100% - 240px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.8s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.8s * var(--height)));
}
body #fakeform p > span:nth-of-type(16) > span {
-webkit-animation-delay: calc(0.8s * var(--height));
animation-delay: calc(0.8s * var(--height));
}
body #fakeform p > span:nth-of-type(16) > span:before {
-webkit-animation-delay: calc(0.8s * var(--height)), calc(0.8s * var(--height) + 3s);
animation-delay: calc(0.8s * var(--height)), calc(0.8s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(17) {
offset-distance: calc(100% - 255px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.85s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.85s * var(--height)));
}
body #fakeform p > span:nth-of-type(17) > span {
-webkit-animation-delay: calc(0.85s * var(--height));
animation-delay: calc(0.85s * var(--height));
}
body #fakeform p > span:nth-of-type(17) > span:before {
-webkit-animation-delay: calc(0.85s * var(--height)), calc(0.85s * var(--height) + 3s);
animation-delay: calc(0.85s * var(--height)), calc(0.85s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(18) {
offset-distance: calc(100% - 270px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.9s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.9s * var(--height)));
}
body #fakeform p > span:nth-of-type(18) > span {
-webkit-animation-delay: calc(0.9s * var(--height));
animation-delay: calc(0.9s * var(--height));
}
body #fakeform p > span:nth-of-type(18) > span:before {
-webkit-animation-delay: calc(0.9s * var(--height)), calc(0.9s * var(--height) + 3s);
animation-delay: calc(0.9s * var(--height)), calc(0.9s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(19) {
offset-distance: calc(100% - 285px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.95s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (0.95s * var(--height)));
}
body #fakeform p > span:nth-of-type(19) > span {
-webkit-animation-delay: calc(0.95s * var(--height));
animation-delay: calc(0.95s * var(--height));
}
body #fakeform p > span:nth-of-type(19) > span:before {
-webkit-animation-delay: calc(0.95s * var(--height)), calc(0.95s * var(--height) + 3s);
animation-delay: calc(0.95s * var(--height)), calc(0.95s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(20) {
offset-distance: calc(100% - 300px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1s * var(--height)));
}
body #fakeform p > span:nth-of-type(20) > span {
-webkit-animation-delay: calc(1s * var(--height));
animation-delay: calc(1s * var(--height));
}
body #fakeform p > span:nth-of-type(20) > span:before {
-webkit-animation-delay: calc(1s * var(--height)), calc(1s * var(--height) + 3s);
animation-delay: calc(1s * var(--height)), calc(1s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(21) {
offset-distance: calc(100% - 315px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.05s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.05s * var(--height)));
}
body #fakeform p > span:nth-of-type(21) > span {
-webkit-animation-delay: calc(1.05s * var(--height));
animation-delay: calc(1.05s * var(--height));
}
body #fakeform p > span:nth-of-type(21) > span:before {
-webkit-animation-delay: calc(1.05s * var(--height)), calc(1.05s * var(--height) + 3s);
animation-delay: calc(1.05s * var(--height)), calc(1.05s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(22) {
offset-distance: calc(100% - 330px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.1s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.1s * var(--height)));
}
body #fakeform p > span:nth-of-type(22) > span {
-webkit-animation-delay: calc(1.1s * var(--height));
animation-delay: calc(1.1s * var(--height));
}
body #fakeform p > span:nth-of-type(22) > span:before {
-webkit-animation-delay: calc(1.1s * var(--height)), calc(1.1s * var(--height) + 3s);
animation-delay: calc(1.1s * var(--height)), calc(1.1s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(23) {
offset-distance: calc(100% - 345px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.15s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.15s * var(--height)));
}
body #fakeform p > span:nth-of-type(23) > span {
-webkit-animation-delay: calc(1.15s * var(--height));
animation-delay: calc(1.15s * var(--height));
}
body #fakeform p > span:nth-of-type(23) > span:before {
-webkit-animation-delay: calc(1.15s * var(--height)), calc(1.15s * var(--height) + 3s);
animation-delay: calc(1.15s * var(--height)), calc(1.15s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(24) {
offset-distance: calc(100% - 360px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.2s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.2s * var(--height)));
}
body #fakeform p > span:nth-of-type(24) > span {
-webkit-animation-delay: calc(1.2s * var(--height));
animation-delay: calc(1.2s * var(--height));
}
body #fakeform p > span:nth-of-type(24) > span:before {
-webkit-animation-delay: calc(1.2s * var(--height)), calc(1.2s * var(--height) + 3s);
animation-delay: calc(1.2s * var(--height)), calc(1.2s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(25) {
offset-distance: calc(100% - 375px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.25s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.25s * var(--height)));
}
body #fakeform p > span:nth-of-type(25) > span {
-webkit-animation-delay: calc(1.25s * var(--height));
animation-delay: calc(1.25s * var(--height));
}
body #fakeform p > span:nth-of-type(25) > span:before {
-webkit-animation-delay: calc(1.25s * var(--height)), calc(1.25s * var(--height) + 3s);
animation-delay: calc(1.25s * var(--height)), calc(1.25s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(26) {
offset-distance: calc(100% - 390px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.3s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.3s * var(--height)));
}
body #fakeform p > span:nth-of-type(26) > span {
-webkit-animation-delay: calc(1.3s * var(--height));
animation-delay: calc(1.3s * var(--height));
}
body #fakeform p > span:nth-of-type(26) > span:before {
-webkit-animation-delay: calc(1.3s * var(--height)), calc(1.3s * var(--height) + 3s);
animation-delay: calc(1.3s * var(--height)), calc(1.3s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(27) {
offset-distance: calc(100% - 405px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.35s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.35s * var(--height)));
}
body #fakeform p > span:nth-of-type(27) > span {
-webkit-animation-delay: calc(1.35s * var(--height));
animation-delay: calc(1.35s * var(--height));
}
body #fakeform p > span:nth-of-type(27) > span:before {
-webkit-animation-delay: calc(1.35s * var(--height)), calc(1.35s * var(--height) + 3s);
animation-delay: calc(1.35s * var(--height)), calc(1.35s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(28) {
offset-distance: calc(100% - 420px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.4s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.4s * var(--height)));
}
body #fakeform p > span:nth-of-type(28) > span {
-webkit-animation-delay: calc(1.4s * var(--height));
animation-delay: calc(1.4s * var(--height));
}
body #fakeform p > span:nth-of-type(28) > span:before {
-webkit-animation-delay: calc(1.4s * var(--height)), calc(1.4s * var(--height) + 3s);
animation-delay: calc(1.4s * var(--height)), calc(1.4s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(29) {
offset-distance: calc(100% - 435px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.45s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.45s * var(--height)));
}
body #fakeform p > span:nth-of-type(29) > span {
-webkit-animation-delay: calc(1.45s * var(--height));
animation-delay: calc(1.45s * var(--height));
}
body #fakeform p > span:nth-of-type(29) > span:before {
-webkit-animation-delay: calc(1.45s * var(--height)), calc(1.45s * var(--height) + 3s);
animation-delay: calc(1.45s * var(--height)), calc(1.45s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(30) {
offset-distance: calc(100% - 450px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.5s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.5s * var(--height)));
}
body #fakeform p > span:nth-of-type(30) > span {
-webkit-animation-delay: calc(1.5s * var(--height));
animation-delay: calc(1.5s * var(--height));
}
body #fakeform p > span:nth-of-type(30) > span:before {
-webkit-animation-delay: calc(1.5s * var(--height)), calc(1.5s * var(--height) + 3s);
animation-delay: calc(1.5s * var(--height)), calc(1.5s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(31) {
offset-distance: calc(100% - 465px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.55s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.55s * var(--height)));
}
body #fakeform p > span:nth-of-type(31) > span {
-webkit-animation-delay: calc(1.55s * var(--height));
animation-delay: calc(1.55s * var(--height));
}
body #fakeform p > span:nth-of-type(31) > span:before {
-webkit-animation-delay: calc(1.55s * var(--height)), calc(1.55s * var(--height) + 3s);
animation-delay: calc(1.55s * var(--height)), calc(1.55s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(32) {
offset-distance: calc(100% - 480px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.6s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.6s * var(--height)));
}
body #fakeform p > span:nth-of-type(32) > span {
-webkit-animation-delay: calc(1.6s * var(--height));
animation-delay: calc(1.6s * var(--height));
}
body #fakeform p > span:nth-of-type(32) > span:before {
-webkit-animation-delay: calc(1.6s * var(--height)), calc(1.6s * var(--height) + 3s);
animation-delay: calc(1.6s * var(--height)), calc(1.6s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(33) {
offset-distance: calc(100% - 495px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.65s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.65s * var(--height)));
}
body #fakeform p > span:nth-of-type(33) > span {
-webkit-animation-delay: calc(1.65s * var(--height));
animation-delay: calc(1.65s * var(--height));
}
body #fakeform p > span:nth-of-type(33) > span:before {
-webkit-animation-delay: calc(1.65s * var(--height)), calc(1.65s * var(--height) + 3s);
animation-delay: calc(1.65s * var(--height)), calc(1.65s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(34) {
offset-distance: calc(100% - 510px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.7s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.7s * var(--height)));
}
body #fakeform p > span:nth-of-type(34) > span {
-webkit-animation-delay: calc(1.7s * var(--height));
animation-delay: calc(1.7s * var(--height));
}
body #fakeform p > span:nth-of-type(34) > span:before {
-webkit-animation-delay: calc(1.7s * var(--height)), calc(1.7s * var(--height) + 3s);
animation-delay: calc(1.7s * var(--height)), calc(1.7s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(35) {
offset-distance: calc(100% - 525px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.75s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.75s * var(--height)));
}
body #fakeform p > span:nth-of-type(35) > span {
-webkit-animation-delay: calc(1.75s * var(--height));
animation-delay: calc(1.75s * var(--height));
}
body #fakeform p > span:nth-of-type(35) > span:before {
-webkit-animation-delay: calc(1.75s * var(--height)), calc(1.75s * var(--height) + 3s);
animation-delay: calc(1.75s * var(--height)), calc(1.75s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(36) {
offset-distance: calc(100% - 540px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.8s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.8s * var(--height)));
}
body #fakeform p > span:nth-of-type(36) > span {
-webkit-animation-delay: calc(1.8s * var(--height));
animation-delay: calc(1.8s * var(--height));
}
body #fakeform p > span:nth-of-type(36) > span:before {
-webkit-animation-delay: calc(1.8s * var(--height)), calc(1.8s * var(--height) + 3s);
animation-delay: calc(1.8s * var(--height)), calc(1.8s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(37) {
offset-distance: calc(100% - 555px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.85s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.85s * var(--height)));
}
body #fakeform p > span:nth-of-type(37) > span {
-webkit-animation-delay: calc(1.85s * var(--height));
animation-delay: calc(1.85s * var(--height));
}
body #fakeform p > span:nth-of-type(37) > span:before {
-webkit-animation-delay: calc(1.85s * var(--height)), calc(1.85s * var(--height) + 3s);
animation-delay: calc(1.85s * var(--height)), calc(1.85s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(38) {
offset-distance: calc(100% - 570px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.9s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.9s * var(--height)));
}
body #fakeform p > span:nth-of-type(38) > span {
-webkit-animation-delay: calc(1.9s * var(--height));
animation-delay: calc(1.9s * var(--height));
}
body #fakeform p > span:nth-of-type(38) > span:before {
-webkit-animation-delay: calc(1.9s * var(--height)), calc(1.9s * var(--height) + 3s);
animation-delay: calc(1.9s * var(--height)), calc(1.9s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(39) {
offset-distance: calc(100% - 585px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (1.95s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (1.95s * var(--height)));
}
body #fakeform p > span:nth-of-type(39) > span {
-webkit-animation-delay: calc(1.95s * var(--height));
animation-delay: calc(1.95s * var(--height));
}
body #fakeform p > span:nth-of-type(39) > span:before {
-webkit-animation-delay: calc(1.95s * var(--height)), calc(1.95s * var(--height) + 3s);
animation-delay: calc(1.95s * var(--height)), calc(1.95s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(40) {
offset-distance: calc(100% - 600px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2s * var(--height)));
}
body #fakeform p > span:nth-of-type(40) > span {
-webkit-animation-delay: calc(2s * var(--height));
animation-delay: calc(2s * var(--height));
}
body #fakeform p > span:nth-of-type(40) > span:before {
-webkit-animation-delay: calc(2s * var(--height)), calc(2s * var(--height) + 3s);
animation-delay: calc(2s * var(--height)), calc(2s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(41) {
offset-distance: calc(100% - 615px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.05s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.05s * var(--height)));
}
body #fakeform p > span:nth-of-type(41) > span {
-webkit-animation-delay: calc(2.05s * var(--height));
animation-delay: calc(2.05s * var(--height));
}
body #fakeform p > span:nth-of-type(41) > span:before {
-webkit-animation-delay: calc(2.05s * var(--height)), calc(2.05s * var(--height) + 3s);
animation-delay: calc(2.05s * var(--height)), calc(2.05s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(42) {
offset-distance: calc(100% - 630px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.1s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.1s * var(--height)));
}
body #fakeform p > span:nth-of-type(42) > span {
-webkit-animation-delay: calc(2.1s * var(--height));
animation-delay: calc(2.1s * var(--height));
}
body #fakeform p > span:nth-of-type(42) > span:before {
-webkit-animation-delay: calc(2.1s * var(--height)), calc(2.1s * var(--height) + 3s);
animation-delay: calc(2.1s * var(--height)), calc(2.1s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(43) {
offset-distance: calc(100% - 645px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.15s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.15s * var(--height)));
}
body #fakeform p > span:nth-of-type(43) > span {
-webkit-animation-delay: calc(2.15s * var(--height));
animation-delay: calc(2.15s * var(--height));
}
body #fakeform p > span:nth-of-type(43) > span:before {
-webkit-animation-delay: calc(2.15s * var(--height)), calc(2.15s * var(--height) + 3s);
animation-delay: calc(2.15s * var(--height)), calc(2.15s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(44) {
offset-distance: calc(100% - 660px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.2s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.2s * var(--height)));
}
body #fakeform p > span:nth-of-type(44) > span {
-webkit-animation-delay: calc(2.2s * var(--height));
animation-delay: calc(2.2s * var(--height));
}
body #fakeform p > span:nth-of-type(44) > span:before {
-webkit-animation-delay: calc(2.2s * var(--height)), calc(2.2s * var(--height) + 3s);
animation-delay: calc(2.2s * var(--height)), calc(2.2s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(45) {
offset-distance: calc(100% - 675px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.25s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.25s * var(--height)));
}
body #fakeform p > span:nth-of-type(45) > span {
-webkit-animation-delay: calc(2.25s * var(--height));
animation-delay: calc(2.25s * var(--height));
}
body #fakeform p > span:nth-of-type(45) > span:before {
-webkit-animation-delay: calc(2.25s * var(--height)), calc(2.25s * var(--height) + 3s);
animation-delay: calc(2.25s * var(--height)), calc(2.25s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(46) {
offset-distance: calc(100% - 690px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.3s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.3s * var(--height)));
}
body #fakeform p > span:nth-of-type(46) > span {
-webkit-animation-delay: calc(2.3s * var(--height));
animation-delay: calc(2.3s * var(--height));
}
body #fakeform p > span:nth-of-type(46) > span:before {
-webkit-animation-delay: calc(2.3s * var(--height)), calc(2.3s * var(--height) + 3s);
animation-delay: calc(2.3s * var(--height)), calc(2.3s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(47) {
offset-distance: calc(100% - 705px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.35s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.35s * var(--height)));
}
body #fakeform p > span:nth-of-type(47) > span {
-webkit-animation-delay: calc(2.35s * var(--height));
animation-delay: calc(2.35s * var(--height));
}
body #fakeform p > span:nth-of-type(47) > span:before {
-webkit-animation-delay: calc(2.35s * var(--height)), calc(2.35s * var(--height) + 3s);
animation-delay: calc(2.35s * var(--height)), calc(2.35s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(48) {
offset-distance: calc(100% - 720px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.4s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.4s * var(--height)));
}
body #fakeform p > span:nth-of-type(48) > span {
-webkit-animation-delay: calc(2.4s * var(--height));
animation-delay: calc(2.4s * var(--height));
}
body #fakeform p > span:nth-of-type(48) > span:before {
-webkit-animation-delay: calc(2.4s * var(--height)), calc(2.4s * var(--height) + 3s);
animation-delay: calc(2.4s * var(--height)), calc(2.4s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(49) {
offset-distance: calc(100% - 735px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.45s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.45s * var(--height)));
}
body #fakeform p > span:nth-of-type(49) > span {
-webkit-animation-delay: calc(2.45s * var(--height));
animation-delay: calc(2.45s * var(--height));
}
body #fakeform p > span:nth-of-type(49) > span:before {
-webkit-animation-delay: calc(2.45s * var(--height)), calc(2.45s * var(--height) + 3s);
animation-delay: calc(2.45s * var(--height)), calc(2.45s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:nth-of-type(50) {
offset-distance: calc(100% - 750px);
-webkit-animation-delay: calc(1s + 1.75s * var(--height) + (2.5s * var(--height)));
animation-delay: calc(1s + 1.75s * var(--height) + (2.5s * var(--height)));
}
body #fakeform p > span:nth-of-type(50) > span {
-webkit-animation-delay: calc(2.5s * var(--height));
animation-delay: calc(2.5s * var(--height));
}
body #fakeform p > span:nth-of-type(50) > span:before {
-webkit-animation-delay: calc(2.5s * var(--height)), calc(2.5s * var(--height) + 3s);
animation-delay: calc(2.5s * var(--height)), calc(2.5s * var(--height) + 3s);
}
@keyframes bounce {
to {
transform: translateY(calc(-100px * var(--height)));
}
}
@keyframes slide {
75% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1);
}
99.5% {
offset-distance: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
opacity: 1;
}
100% {
offset-distance: 0;
opacity: 0;
transform: scaleY(-1) scaleX(-1) translateY(150px);
}
}
body #fakeform p > span:last-of-type.cursor:after {
right: 0;
}
body #fakeform p > span:last-of-type:after {
content: "|";
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -15px;
color: #000;
-webkit-animation: blinking 1s linear infinite;
animation: blinking 1s linear infinite;
}
@-webkit-keyframes blinking {
50% {
color: #000;
}
50.005% {
color: #fff;
}
100% {
color: #fff;
}
}
@keyframes blinking {
50% {
color: #000;
}
50.005% {
color: #fff;
}
100% {
color: #fff;
}
}
body #wrap {
width: 600px;
max-width: 100%;
height: 80px;
position: relative;
background: radial-gradient(circle at center, #fff 200px, #000 200px, #000 203px, transparent 203px) 50% 400px/200px 750px repeat;
box-shadow: 0 0 0 10px #fff;
transform: scale(0.75);
transition: background-position 0.3s ease-in-out;
}
body #wrap:before {
content: "EMAIL";
font-family: "Balloon-Base";
top: -75px;
left: 0;
color: #F43F5E;
font-size: 50px;
position: absolute;
transition: 0.2s ease-in-out;
}
body form {
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
}
body form:hover ~ #fakeform #wrapper > span:last-of-type:after {
opacity: 1;
}
body form input {
outline: none;
position: absolute;
height: 100%;
}
body form input#email {
left: 0;
width: 75%;
opacity: 0;
}
body form input#submit {
width: 220px;
right: -40px;
height: 106px;
top: -13px;
text-align: center;
border: none;
background: green;
font-family: "Balloon-Base";
color: #fff;
font-size: 44px;
transition: 0.25s ease-in-out;
cursor: pointer;
}
body form input#submit:hover {
background: #a81fca;
}
03. JavaScript Code :-
const bounce = document.getElementById("bounce");
const fakeForm = document.getElementById("wrapper");
const email = document.getElementById("email");
bounce.addEventListener('keyup', appendChar);
bounce.addEventListener('submit', submitForm);
function appendChar(){
let formVal = email.value;
let result = "";
let inputData = document.createElement("p");
inputData.setAttribute("id", "fieldtext");
inputData.innerHTML = formVal;
fakeForm.innerHTML = '<span class="cursor"></span>';
let splitText = inputData.textContent.split("");
splitText.forEach(function(char){
result += (char.trim() === "") ? "" : "<span><span data-char='"+char+"'>" + char +"</span></span>"
});
fakeForm.innerHTML += result;
}
function submitForm(e){
e.preventDefault();
document.body.classList.add("sliding");
setTimeout(() => {
fakeForm.innerHTML = '<span class="cursor"></span>';
document.getElementById("bounce").reset(); document.body.classList.remove("sliding");
}, 6500);
}
OutPut :-
Download Ebooks – Click Me
Download Notes – Click Me
