<body class="animated-bg" style="background-color:#4e50a3;overflow:hidden;">
<div style="width:80px;height:80px;left:50%;margin-left:-40px;top:50%; margin-top:-80px; position: absolute;">
<img id="slide-top1" class="slide-top" src="http://farm6.staticflickr.com/5343/8846852794_d9cf3b0007_o.png" style="position:absolute;left:0px"/>
<img id="slide-bottom1" class="slide-bottom" src="http://farm8.staticflickr.com/7420/8846852770_659d5f4f02_o.png" style="position:absolute;left:0px;"/>
<img id="slide-left1" class="slide-left" src="http://farm4.staticflickr.com/3779/8846235093_2b96aa95d0_o.png" style="position:absolute;top:0px;"/>
<img id="slide-right1" class="slide-right" src="http://farm3.staticflickr.com/2891/8846852684_b3d6f6b56b_o.png" style="position:absolute;top:0px;"/>
</div>
<div style="width:80px;height:80px;left:50%;margin-left:-40px; top:50%; margin-top:80px; position: absolute;">
<img id="slide-top2" class="slide-top" src="http://farm4.staticflickr.com/3745/8846853216_5b8fe6721f_o.png" style="position:absolute;left:0px"/>
<img id="slide-bottom2" class="slide-bottom" src="http://farm6.staticflickr.com/5451/8846235331_6219710497_o.png" style="position:absolute;left:0px;"/>
<img id="slide-left2" class="slide-left" src="http://farm9.staticflickr.com/8129/8846853056_d4e4bd6115_o.png" style="position:absolute;top:0px;"/>
<img id="slide-right2" class="slide-right" src="http://farm4.staticflickr.com/3822/8846853054_6248ea8dd4_o.png" style="position:absolute;top:0px;"/>
</div>
<div onclick="reformIt()" id="re-form-it" style="position:absolute; bottom: 20px; left: 80%; width: 130px; height: 40px; margin-left: -65px; background: brown; line-height: 40px; font-size: 24px; font-family: serif; z-index: 20; border-radius: 20px; color: #FFF; text-shadow: 3px 3px 0px maroon; cursor:pointer; padding-left:30px;">Once More</div>
<img id="tr-logo" class="fadeIn animated delay-p8s" src="http://farm6.staticflickr.com/5333/8846235389_391e199042_o.png" style="position:absolute; top:50%; left: 50%; margin-left:-150px; margin-top:10px;"/>
</body>/* .animated and .fadeIn classes are borrowed from animate.css made by Dan Eden https://daneden.me/animate/ */
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
.delay-p8s {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.animated-bg {
-webkit-animation: animatedBg 45s infinite;
-moz-animation: animatedBg 45s;
-o-animation: animatedBg 45s;
-ms-animation: animatedBg 45s;
}
@-webkit-keyframes animatedBg {
from {
background-position:0% 0%;
}
to {
background-position:100% 0%;
}
}
@-moz-keyframes animatedBg {
from {
background-position:0% 0%;
}
to {
background-position:100% 100%;
}
}
@-o-keyframes animatedBg {
from {
background-position:0% 0%;
}
to {
background-position:100% 100%;
}
}
@keyframes animatedBg {
from {
background-position:0% 0%;
}
to {
background-position:100% 100%;
}
}
.slide-top {
-webkit-animation: slideTop 0.8s;
-moz-animation: slideTop 0.8s;
-o-animation: slideTop 0.8s;
-ms-animation: slideTop 0.8s;
}
@-webkit-keyframes slideTop {
from {
top:-500px;
}
to {
top: 0px;
}
}
@-moz-keyframes slideTop {
from {
top:-500px;
}
to {
top: 0px;
}
}
@-o-keyframes slideTop {
from {
top:-500px;
}
to {
top: 0px;
}
}
@keyframes slideTop {
from {
top:-500px;
}
to {
top: 0px;
}
}
.slide-bottom {
-webkit-animation: slideBottom 0.8s;
-moz-animation: slideBottom 0.8s;
-o-animation: slideBottom 0.8s;
-ms-animation: slideBottom 0.8s;
}
@-webkit-keyframes slideBottom {
from {
top:500px;
}
to {
top: 0px;
}
}
@-moz-keyframes slideBottom {
from {
top:500px;
}
to {
top: 0px;
}
}
@-o-keyframes slideBottom {
from {
top:500px;
}
to {
top: 0px;
}
}
@keyframes slideBottom {
from {
top:500px;
}
to {
top: 0px;
}
}
.slide-left {
-webkit-animation: slideLeft 0.8s;
-moz-animation: slideLeft 0.8s;
-o-animation: slideLeft 0.8s;
-ms-animation: slideLeft 0.8s;
}
@-webkit-keyframes slideLeft {
from {
left:-500px;
}
to {
left: 0px;
}
}
@-moz-keyframes slideLeft {
from {
left:-500px;
}
to {
left: 0px;
}
}
@-o-keyframes slideLeft {
from {
left:-500px;
}
to {
left: 0px;
}
}
@keyframes slideLeft {
from {
left:-500px;
}
to {
left: 0px;
}
}
.slide-right {
-webkit-animation: slideRight 0.8s;
-moz-animation: slideRight 0.8s;
-o-animation: slideRight 0.8s;
-ms-animation: slideRight 0.8s;
}
@-webkit-keyframes slideRight {
from {
left: 500px;
}
to {
left: 0px;
}
}
@-moz-keyframes slideRight {
from {
left: 500px;
}
to {
left: 0px;
}
}
@-o-keyframes slideRight {
from {
left: 500px;
}
to {
left: 0px;
}
}
@keyframes slideRight {
from {
left: 500px;
}
to {
left: 0px;
}
}function reformIt() {
//This code snippet is emulated from https://css-tricks.com/restart-css-animation/
var slideTop1 = document.getElementById('slide-top1');
var slideBottom1 = document.getElementById('slide-bottom1');
var slideLeft1 = document.getElementById('slide-left1');
var slideRight1 = document.getElementById('slide-right1');
var slideTop2 = document.getElementById('slide-top2');
var slideBottom2 = document.getElementById('slide-bottom2');
var slideLeft2 = document.getElementById('slide-left2');
var slideRight2 = document.getElementById('slide-right2');
var newST1 = slideTop1.cloneNode(true);
var newSB1 = slideBottom1.cloneNode(true);
var newSL1 = slideLeft1.cloneNode(true);
var newSR1 = slideRight1.cloneNode(true);
var newST2 = slideTop2.cloneNode(true);
var newSB2 = slideBottom2.cloneNode(true);
var newSL2 = slideLeft2.cloneNode(true);
var newSR2 = slideRight2.cloneNode(true);
slideTop1.parentNode.replaceChild(newST1, slideTop1);
slideBottom1.parentNode.replaceChild(newSB1, slideBottom1);
slideLeft1.parentNode.replaceChild(newSL1, slideLeft1);
slideRight1.parentNode.replaceChild(newSR1, slideRight1);
slideTop2.parentNode.replaceChild(newST2, slideTop2);
slideBottom2.parentNode.replaceChild(newSB2, slideBottom2);
slideLeft2.parentNode.replaceChild(newSL2, slideLeft2);
slideRight2.parentNode.replaceChild(newSR2, slideRight2);
var trLogo = document.getElementById('tr-logo');
var newTL = trLogo.cloneNode(true);
trLogo.parentNode.replaceChild(newTL,trLogo);
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.