How to insert code animirovannoe transition?

There is an example of the transition.
When you try to insert it into a normal html disc it turns out that is trying to push the button (which is not visible), nothing happens:
5dfa1d8367844190856895.png
css/script/jquery (just in case) are connected.
April 3rd 20 at 18:32
1 answer
April 3rd 20 at 18:34
In google chrome, "inspect frame" in the context menu of the frame with the result. A new window opens with the code:
<!DOCTYPE html>
<html lang="en">
the <head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Page Transition with Loader</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">
<style>
 @-webkit-keyframes delay {
 0%, 40%, 100% {
 transform: scaleY(0.05);
 -webkit-transform: scaleY(0.05);
}
 20% {
 transform: scaleY(1);
 -webkit-transform: scaleY(1);
}
}
@keyframes delay {
 0%, 40%, 100% {
 transform: scaleY(0.05);
 -webkit-transform: scaleY(0.05);
}
 20% {
 transform: scaleY(1);
 -webkit-transform: scaleY(1);
}
}
body {
 font-size: 1.6 rem;
 font-family: "Open Sans", sans-serif;
 color: #4089a6;
 background-color: #ffffff;
 -webkit-font-smoothing: antialiased;
/*&.is-changing{
&:before,
&:after{
 transform: translateY(0);
}
}*/
}
body:before, body:after {
 content: ";
 height: 50vh;
 width: 100%;
 position: fixed;
 left: 0;
 background: #1c2020;
 z-index: 1;
}
body:before {
 top: 0;
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
}
body:after {
 bottom: 0;
 -webkit-transform: translateY(100%);
 transform: translateY(100%);
}

h1 {
 color: #1c2020;
 margin-bottom: 1em;
 font-size: 2.2 rem;
 font-weight: 100;
}

.btn {
 display: inline-block;
 padding: 1.4 em 1.6 em;
 margin-bottom: 2em;
 border-radius: 50em;
 background-color: #343b3b;
 color: #ffffff;
 font-weight: bold;
 font-size: 0.8 rem;
 letter-spacing: 1px;
 text-transform: uppercase;
 text-decoration: none;
}
.btn:hover {
 background-color: #404949;
}

.loader {
 margin: 0 auto;
 width: 60px;
 height: 50px;
 text-align: center;
 font-size: 10px;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translateY(-50%) translateX(-50%);
 transform: translateY(-50%) translateX(-50%);
 z-index: 500;
 opacity: 0;
}
.loader > div {
 height: 100%;
 width: 8px;
 display: inline-block;
 float: left;
 margin-left: 2px;
 -webkit-animation: delay 0.8 s infinite ease-in-out;
 animation: delay 0.8 s infinite ease-in-out;
}
.loader .bar1 {
 background-color: #754fa0;
}
.loader .bar2 {
 background-color: #09b7bf;
 -webkit-animation-delay: -0.7 s;
 animation-delay: -0.7 s;
}
.loader .bar3 {
 background-color: #90d36b;
 -webkit-animation-delay: -0.6 s;
 animation-delay: -0.6 s;
}
.loader .bar4 {
 background-color: #f2d40d;
 -webkit-animation-delay: -0.5 s;
 animation-delay: -0.5 s;
}
.loader .bar5 {
 background-color: #fcb12b;
 -webkit-animation-delay: -0.4 s;
 animation-delay: -0.4 s;
}
.loader .bar6 {
 background-color: #ed1b72;
 -webkit-animation-delay: -0.3 s;
 animation-delay: -0.3 s;
}

main {
 height: 100vh;
 /* padding: 10px; */
 text-align: center;
}
main .-content {
 position: relative;
 height: 100vh;
}
main .-content > div {
 height: 100%;
 overflow: hidden;
 overflow-y: auto;
}
main .-content.-index {
 background-color: #f6f6f6;
 display: table;
 width: 100%;
}
main .-content.-index > div {
 display: table-cell;
 vertical-align: middle;
}
</style>
the <script>
 window.console = window.console || function(t) {};
</script>
the <script>
 if (document.location.search.match(/type=embed/gi)) {
 window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="loader">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
<main>
<div class="content -index">
the <div>
<h1>Loader Transition</h1>
<a href="#" class="btn js-trigger-transition">Transition Begin</a>
</div>
</div>
</main>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/plugins/CSSRulePlugin.min.js'></script>
<script id="rendered-js">
 // play on load for gallery view
setTimeout(transition, 1000);

$('.js-trigger-transition').on('click', function (e) {
e.preventDefault();
transition();
});

function transition() {
 var tl = new TimelineMax();

 tl.to(CSSRulePlugin.getRule('body:before'), 0.2, { cssRule: { top: '50%' }, ease: Power2.easeOut }, 'close').
 to(CSSRulePlugin.getRule('body:after'), 0.2, { cssRule: { bottom: '50%' }, ease: Power2.easeOut }, 'close').
 to($('.loader'), 0.2, { opacity: 1 }).
 to(CSSRulePlugin.getRule('body:before'), 0.2, { cssRule: { top: '0%' }, ease: Power2.easeOut }, '+=1.5', 'open').
 to(CSSRulePlugin.getRule('body:after'), 0.2, { cssRule: { bottom: '0%' }, ease: Power2.easeOut }, '-=0.2', 'open').
 to($('.loader'), 0.2, { opacity: 0 }, '-=0.2');
}
 //# sourceURL=pen.js
</script>
</body>
</html>


Copied, pasted into a text editor, saved as html. Normally opens and everything works.

Find more questions by tags CSSJavaScriptHTML