JSFiddle - React, Tailwind, and code Playground
HTML
<img class="layer1" src="http://newtpond.com/test/bg.png" alt="bggradient" />
<div class="wrapper">
<div class="header">
<img src="http://newtpond.com/test/company-name.png" alt="Company name" />
</div>
<div class="content"></div>
</div>
CSS
body {
width:100%;
height:100%;
margin:0;
padding:0;
}
/* for the animation */
.layer1 {
display:block;
position:fixed;
width:100%;
height:300%;
-moz-animation: GoLayer1 5s infinite;
-webkit-animation: GoLayer1 5s infinite;
-o-animation: GoLayer1 5s infinite;
-ms-animation: GoLayer1 5s infinite;
animation: GoLayer1 5s infinite;
}
@-moz-keyframes GoLayer1 {
0% {
top:0;
}
50% {
top:-200%;
}
100% {
top:0;
}
}
@-webkit-keyframes GoLayer1 {
0% {
top:0;
}
50% {
top:-200%;
}
100% {
top:0;
}
}
@-o-keyframes GoLayer1 {
0% {
top:0;
}
50% {
top:-200%;
}
100% {
top:0;
}
}
@-ms-keyframes GoLayer1 {
0% {
top:0;
}
50% {
top:-200%;
}
100% {
top:0;
}
}
@keyframes GoLayer1 {
0% {
top:0;
}
50% {
top:-200%;
}
100% {
top:0;
}
}
@-moz-keyframes onTop {
0% {
opacity: 1;
z-index: 999;
}
50% {
opacity: 1;
z-index: 999;
}
100% {
opacity: 1;
z-index: 999;
}
}
@-webkit-keyframes onTop {
0% {
opacity: 1;
z-index: 999;
}
50% {
opacity: 1;
z-index: 999;
}
100% {
opacity: 1;
z-index: 999;
}
}
@-o-keyframes onTop {
0% {
opacity: 1;
z-index: 999;
}
50% {
opacity: 1;
z-index: 999;
}
100% {
opacity: 1;
z-index: 999;
}
}
@-ms-keyframes onTop {
0% {
opacity: 1;
z-index: 999;
}
50% {
opacity: 1;
z-index: 999;
}
100% {
opacity: 1;
z-index: 999;
}
}
@keyframes onTop {
0% {
opacity: 1;
z-index: 999;
}
50% {
opacity: 1;
z-index: 999;
}
100% {
opacity: 1;
z-index: 999;
...