Skip to content

Instantly share code, notes, and snippets.

@innovationhero

innovationhero/index.html

Created October 22, 2012 09:54
Show Gist options
  • Save innovationhero/3930705 to your computer and use it in GitHub Desktop.
Save innovationhero/3930705 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by InnovationHero. Complete RedBackground - background fixed, needs to remove some duplicated code from the css
Raw
index.html
<!-- http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/ -->
<!-- Header with Navigation -->
<div id="header">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Page Transitions with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Your name" />
<h1>eKoKi.me - everyting is an Idea!</h1>
<a href="#home" ><img src="http://www.acrylic-solid-surface.com/photo/pm472288-square_decorative_grey_translucent_resin_panels_for_bathroom_wall_stone_sheets.jpg" border="2" style="border:2px solid black;max-width:100%;" alt="Photo of Milford Sound in New Zealand!" />
</a> <a href="#portfolio" ><img src="http://www.acrylic-solid-surface.com/photo/pm472288-square_decorative_grey_translucent_resin_panels_for_bathroom_wall_stone_sheets.jpg" border="2" style="border:2px solid black;max-width:100%;" alt="Photo of Milford Sound in New Zealand!" />
</a> <a href="#about" ><img src="http://www.acrylic-solid-surface.com/photo/pm472288-square_decorative_grey_translucent_resin_panels_for_bathroom_wall_stone_sheets.jpg" border="2" style="border:2px solid black;max-width:100%;" alt="Photo of Milford Sound in New Zealand!" />
</a> <a href="#contact" ><img src="http://www.acrylic-solid-surface.com/photo/pm472288-square_decorative_grey_translucent_resin_panels_for_bathroom_wall_stone_sheets.jpg" border="2" style="border:2px solid black;max-width:100%;" alt="Photo of Milford Sound in New Zealand!" />
</a>
<a href="#viewer" ><img src="http://www.acrylic-solid-surface.com/photo/pm472288-square_decorative_grey_translucent_resin_panels_for_bathroom_wall_stone_sheets.jpg" border="2" style="border:2px solid black;max-width:100%;" alt="Photo of Milford Sound in New Zealand!" />
</a>
</div>
<body>
<!-- Home -->
<div id="home" class="content">
<h2>Home</h2>
<p>Everyhting is an idea Everyhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhting is an ideaEveryhta</p> <!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel">
<div class="content">
<h2>Portfolio</h2>
<p>Some content about the porfolio </p>
<div class="drop-shadow raised curved-hz-1 halfCircleLeft"> <p>Persfsfsfa</p> </div>
<div class="drop-shadow raised curved-hz-1"> <p>Perspective</p> </div>
<div class="drop-shadow raised curved-hz-1 halfCircleRight"> <p>Perspective</p> </div>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel">
<div class="content">
<h2>Login</h2>
<p>Welcome to your ekoki.me</p>
<div id="leds">
<div class="online led"></div>
<div class="offline active led"></div>
</div>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel">
<div class="content">
<h2>Welcome Mohamed, you have 20 updates, 1 new message, 4 awards, 2 gifts</h2>
<p>Some content contact</p>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
<!-- Viewer -->
<div id="viewer" class="panel">
<div class="viewer">
<div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul>
<li id="first" class="firstanimation"> <a href="#">
<img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_1.jpg" alt="Cougar"/> </a>
<div class="tooltip"> <h1>Cougar</h1> </div>
</li>
<li id="second" class="secondanimation"> <a href="#">
<img src="http:\\www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_2.jpg" alt="Lions"/> </a>
<div class="tooltip"> <h1>Lions</h1> </div> </li>
<li id="third" class="thirdanimation"> <a href="#">
<img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_3.jpg" alt="Snowalker"/> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a> <div class="tooltip"> <h1>Howling</h1> </div>
</li> <li id="fifth" class="fifthanimation"> <iframe width="420" height="315" src="http://www.youtube.com/embed/CrSR-55xXD8" frameborder="0" allowfullscreen></iframe>alt="Sunbathing"/> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div>
<div class="progress-bar"></div> </div> </div></div> <!-- ... -->
</div>
</div>
<!-- /viewer -->
</body>
Raw
script.js
{"view":"split","fontsize":"150","seethrough":"","prefixfree":"1","page":"html"}
Raw
style.css
/* http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/ */
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
font-family: 'Electrolize', Arial, sans-serif;
font-weight: 400;
font-size: 15px;
color: #fff;
}
a{
text-decoration: none;
}
.clr{
clear: both;
}
/* Top Bar Style */
.codrops-top{
line-height: 24px;
font-size: 11px;
background: rgba(255, 255, 255, 1);
text-transform: uppercase;
z-index: 9999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 24px;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;
-moz-animation: slideOut 0.5s ease-in-out 0.3s backwards;
-o-animation: slideOut 0.5s ease-in-out 0.3s backwards;
-ms-animation: slideOut 0.5s ease-in-out 0.3s backwards;
animation: slideOut 0.5s ease-in-out 0.3s backwards;
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
text-shadow: 0px 1px 1px #fff;
display: block;
float: left;
}
.codrops-top a:hover{
background: #fff;
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
}
/* Demo Buttons */
#codrops-demos{
position: fixed;
z-index: 2000;
top: 50px;
right: 50px;
}
#codrops-demos a{
display: inline-block;
font-size: 12px;
width: 60px;
height: 24px;
color: #000;
line-height: 24px;
text-align: center;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
background: rgba(255,255,255,0.9);
text-transform: uppercase;
}
#codrops-demos a:hover{
background: #ddd;
color: #000;
}
#codrops-demos a.current-demo,
#codrops-demos a.current-demo:hover{
background: #000;
color: #fff;
cursor: default;
}
@-webkit-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
#header{
position: absolute;
z-index: 2000;
width: 235px;
top: 50px;
}
#header h1{
font: 20px 'Gloria Hallelujah', cursive;
font-size: 20px;
font-weight: 200;
/* text-transform: uppercase; */
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 10px;
background: #000;
}
#navigation {
margin-top: 20px;
width: 235px;
display:block;
list-style:none;
z-index:3;
}
#navigation a{
color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 14px;
}
#navigation a:hover {
background: #ddd;
}
.panel{
min-width: 100%;
height: 98%;
overflow-y: auto;
overflow-x: hidden;
margin-top: -150%;
position: absolute;
background: #000;
box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
z-index: 2;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.panel:target{
margin-top: 0%;
background-color: #ffcb00; yellow;
background-color: #c40001; red;
}
.content{
right: 40px;
left: 280px;
top: 0px;
position: absolute;
padding-bottom: 30px;
}
.content h2{
font: 20px 'Gloria Hallelujah', cursive;
font-size: 40px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}
.content p{
font: 20px 'Gloria Hallelujah', cursive;
font-size: 18px;
padding: 20px;
line-height: 24px;
color: #fff;
display: inline-block;
background: black;
padding: 20px;
margin: 3px 0px;
}
#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
background: #000;
color: #fff;
}
/* login leds */
#leds.on{ background-position:0 44px; }
.online, .offline{
margin:57px 13px 0 13px;
width:11px; height:41px; float:left; display:inline;
}
.online{
background:-moz-linear-gradient(-90deg, rgba(85,92,79,0.9), rgba(69,76,62,1) 1%, rgba(42,49,34,1) 97%, rgba(15,15,15,1) 100% );
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(85,92,79,0.9)), color-stop(0.04, rgba(69,76,62,1)), color-stop(0.96, rgba(42,49,34,1)), color-stop(1, rgba(15,15,15,1)) );
border-top:1px solid #0f0f0f;
border-right:1px solid #0f0f0f;
border-left:1px solid #0f0f0f;
border-bottom:1px solid #4e4e4e;
}
.online.active{
-webkit-box-shadow:0 -1px 10px rgba(122,186,53, 0.5), 0 -1px 20px rgba(122,186,53, 0.5);
-moz-box-shadow:0 -1px 10px rgba(122,186,53, 0.5), 0 -1px 20px rgba(122,186,53, 0.5);
overflow:visible;
background:-moz-linear-gradient(-90deg, rgba(156,204,105,0.9), rgba(122,186,53,1) 1%, rgba(95,159,26,1) 98%, rgba(40,40,40,0.5) 100% );
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(156,204,105,0.9)), color-stop(0.04, rgba(122,186,53,1)), color-stop(0.96, rgba(95,159,26,1)), color-stop(1, rgba(0,0,0,1)) );
border-top:1px solid rgba(44,66,20,1);
border-right:1px solid rgba(42,63,20,0.8);
border-left:1px solid rgba(42,63,20,0.8);
border-bottom:1px solid rgba(80,99,60,1);
}
.offline{
background:-moz-linear-gradient(-90deg, rgba(113,91,91,0.9), rgba(100,64,64,1) 1%, rgba(72,37,37,1) 98%, rgba(15,15,15,1) 100% );
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(113,91,91,0.9)), color-stop(0.04, rgba(100,64,64,1)), color-stop(0.96, rgba(72,37,37,1)), color-stop(1, rgba(15,15,15,1)) );
border-top:1px solid #0f0f0f;
border-right:1px solid #0f0f0f;
border-left:1px solid #0f0f0f;
border-bottom:1px solid #4e4e4e;
}
.offline.active{
-moz-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
background:-moz-linear-gradient(-90deg, rgba(226,120,120,0.9), rgba(216,74,74,1) 1%, rgba(188,47,47,1) 98%, rgba(40,40,40,0.5) );
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(226,120,120,0.9)), color-stop(0.04, rgba(216,74,74,1)), color-stop(0.96, rgba(188,47,47,1)), color-stop(1, rgba(0,0,0,1)) );
border-top:1px solid rgba(97,30,30,1);
border-right:1px solid rgba(83,27,27,0.8);
border-left:1px solid rgba(83,27,27,0.8);
border-bottom:1px solid rgba(125,69,69,1);
-webkit-animation-name: blink;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease;
}
@-webkit-keyframes blink {
from {
-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
}
50%{
-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 0.5);
}
to {
-webkit-box-shadow:0 -1px 10px rgba(199,58,58, 0.5), 0 -1px 20px rgba(199,58,58, 1);
}
}
.halfCircleLeft{ height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
background:green;
}
.halfCircleRight{
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:green;
}
a { font-weight:bold; color:#346AA8; }
a:hover, a:focus, a:active { text-decoration:none; }
.container { position:relative; z-index:1; width:600px; padding:20px; margin:0 auto; background:#w FAF0D9 }
.container:after { content:""; display:block; clear:both; visibility:hidden; height:0; font-size:0; }
/* Shared styles */
.drop-shadow { position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
.drop-shadow:before, .drop-shadow:after { content:""; position:absolute; z-index:-2; }
.drop-shadow p { font-size:16px; font-weight:bold; }
/* Lifted corners */
.lifted { -moz-border-radius:4px; border-radius:4px; }
.lifted:before, .lifted:after { bottom:15px; left:10px; width:50%; height:20%; max-width:300px; max-height:100px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.lifted:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
/* Curled corners */
.curled { border:1px solid #efefef; -moz-border-radius:0 0 120px 120px / 0 0 6px 6px; border-radius:0 0 120px 120px / 0 0 6px 6px; }
.curled:before, .curled:after { bottom:12px; left:10px; width:50%; height:55%; max-width:200px; max-height:100px; -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); -webkit-transform:skew(-8deg) rotate(-3deg); -moz-transform:skew(-8deg) rotate(-3deg); -ms-transform:skew(-8deg) rotate(-3deg); -o-transform:skew(-8deg) rotate(-3deg); transform:skew(-8deg) rotate(-3deg); }
.curled:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }
/* Perspective */
.perspective:before { left:80px; bottom:5px; width:50%; height:35%; max-width:200px; max-height:50px; -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); -webkit-transform:skew(50deg); -moz-transform:skew(50deg); -ms-transform:skew(50deg); -o-transform:skew(50deg); transform:skew(50deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%; }
.perspective:after { display:none; }
/* Raised shadow - no pseudo-elements needed */
.raised { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
/* Curved shadows */
.curved:before { top:10px; bottom:10px; left:0; right:50%; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; }
.curved-vt-2:before { right:0; }
.curved-hz-1:before { top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }
.curved-hz-2:before { top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }
/* Rotated box */
.rotated { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.rotated > :first-child:before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
c
/* CONTENT SLIDER */
#content-slider {
width:100%;
height:360px;
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:320px;
width:680px;
margin:40px auto 0;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:320px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}
#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment