Team:SYSU-Software/overview.css

From 2014.igem.org

Revision as of 16:21, 17 October 2014 by Huangmin1012 (Talk | contribs)

@charset "UTF-8"; /** 

* 
* @authors 晚茗 (huangm.ss.sysu@gmail.com)
* @date    2014-10-06 21:14:23
* @version $1.0$
*/
  • {

margin: 0; padding: 0; }

  1. globalWrapper{

height: 100%; }

  1. content{

height: 100%; }

  1. bodyContent{

width: 100%; height: 100%; overflow: hidden; position: relative; } html{ width: 100%; height: 100%; overflow: hidden; } body{ width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#1B0634), color-stop(#2D4292), to(#3494D8)); background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: linear-gradient(top,#1B0634,#2D4292,#3494D8); }

  1. menubar>ul>li:nth-child(7),#menubar>ul>li:nth-child(5),#menubar>ul>li:nth-child(6){

color: transparent !important; }

  1. bodyContent{

background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#1B0634), color-stop(#2D4292), to(#3494D8)); background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: linear-gradient(top,#1B0634,#2D4292,#3494D8); }

  1. bodyContent.hm-part1, body.hm-part1{

background: -webkit-gradient(linear, left top, left bottom, from(#1B0634), color-stop(#2D4292), to(#3494D8)); background: -webkit-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -moz-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: -ms-linear-gradient(top, #1B0634, #2D4292, #3494D8); background: linear-gradient(top,#1B0634,#2D4292,#3494D8);

}

  1. bodyContent.hm-part2, body.hm-part2{

background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#1a0a30), to(#40b63c)); background: -webkit-linear-gradient(top, #1a0a30, #40b63c); background: -moz-linear-gradient(top, #1a0a30, #40b63c); background: -ms-linear-gradient(top, #1a0a30, #40b63c); background: linear-gradient(top,#1a0a30,#40b63c); }

  1. bodyContent.hm-part3, body.hm-part3{

background: -webkit-gradient(linear, left top, left bottom, from(#150348), to(#d04c59)); background: -webkit-linear-gradient(top, #150348, #d04c59); background: -moz-linear-gradient(top, #150348, #d04c59); background: -ms-linear-gradient(top, #150348, #d04c59); background: linear-gradient(top,#150348,#d04c59); }

  1. bodyContent.hm-part4, body.hm-part4{

background: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(#2b1340), to(#42bdbd)); background: -webkit-linear-gradient(top, #2b1340, #42bdbd); background: -moz-linear-gradient(top, #2b1340, #42bdbd); background: -ms-linear-gradient(top, #2b1340, #42bdbd); background: linear-gradient(top,#2b1340,#42bdbd); } .hm-part{ visibility: hidden; -webkit-perspective: 1px; -moz-perspective: 1px; perspective: 1px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .hm-part1 .hm-light, .hm-part1 .scrollPosition{ visibility: visible; } .hm-part1 #hm-part1 ,.hm-part3 #hm-part3{ visibility: visible; -webkit-perspective: 2000px; -moz-perspective: 2000px; perspective: 2000px; -webkit-transition: -webkit-perspective 2s ease-in; -moz-transition: -moz-perspective 2s ease-in; transition: perspective 2s ease-in; } .hm-part2 #hm-part2{ -webkit-perspective: 10000px; -moz-perspective: 10000px; perspective: 10000px; visibility: visible; -webkit-perspective-origin: 39% 50%; -moz-perspective-origin: 39% 50%; perspective-origin: 39% 50%;

-webkit-transition: -webkit-perspective 2s ease-in; -moz-transition: -moz-perspective 2s ease-in; transition: perspective 2s ease-in; } .hm-part4 #hm-part4{ visibility: visible; -webkit-perspective-origin: 56% 81%; -moz-perspective-origin: 56% 81%; perspective-origin: 56% 81%; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-transition: -webkit-perspective 2s ease-in; -moz-transition: -moz-perspective 2s ease-in; transition: perspective 2s ease-in; } .hm-light{ width: 912px; height: 390px; position: fixed; bottom: 0px; left: 50%; visibility: hidden; background-image: url(Overview-BgLight.png); 

 	-webkit-transform: translateX(-50%); 
 	   -moz-transform: translateX(-50%); 
 	    -ms-transform: translateX(-50%); 
 	        transform: translateX(-50%);

} .screenCenter{ width: 912px; height: 500px; position: absolute; top: 45%; left: 50%; 

 	-webkit-transform: translate(-50%,-50%);  
 	   -moz-transform: translate(-50%,-50%);  
 	    -ms-transform: translate(-50%,-50%);  
 	        transform: translate(-50%,-50%); 
}

.hm-part1-header{ text-align: center; -webkit-transform: translateZ(10px); -moz-transform: translateZ(10px); transform: translateZ(10px); }

  1. showpics{

margin-top: -80px; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .hm-part1 .rotate#showpics{ -webkit-animation: rotate 20s linear 1.5s infinite; -moz-animation: rotate 20s linear 1.5s infinite; animation: rotate 20s linear 1.5s infinite; } .showpic{ position: absolute; top: 0; left: 0; }

  1. showparts{

-webkit-transform: translateZ(10px); -moz-transform: translateZ(10px); transform: translateZ(10px); }

  1. showdna{

left: -150px; top: 120px; -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); transform: translateZ(100px); }

  1. showvector{

left: 150px; top: 140px; -webkit-transform: translateZ(150px); -moz-transform: translateZ(150px); transform: translateZ(150px);

} .scrollPosition{ position: fixed; visibility: hidden; left: 50%; bottom: 15px; -webkit-transform: translate(0,0) translateX(-50%); -moz-transform: translate(0,0) translateX(-50%); -ms-transform: translate(0,0) translateX(-50%); transform: translate(0,0) translateX(-50%); } .scrolltip{ width: 40px; height: 63px; background-image: url(Overview-roll.png); -webkit-animation: float 2s infinite alternate; -moz-animation: float 2s infinite alternate; animation: float 2s infinite alternate; } .hm-line{ width: 2500px; height: 3px; margin-top: 250px; margin-left: -794px; background-color: #9ff70f; } .hm-line-star img{ margin-top: -66px; margin-left: -564px; } .hm-part2 .hm-line-star img{ -webkit-animation: line-star 1s .5s; -moz-animation: line-star 1s .5s; animation: line-star 1s .5s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } .hm-doors-perspective{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scale(.7); -moz-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); margin-top: -200px; } .hm-doors{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; -webkit-animation: doors 10s linear infinite; -moz-animation: doors 10s linear infinite; animation: doors 10s linear infinite; } .hm-door{ width: 424px; height: 424px; } .hm-door.and{ background-image: url(And.png); -webkit-transform: translateZ(212px); -moz-transform: translateZ(212px); -ms-transform: translateZ(212px); transform: translateZ(212px);

} .hm-door.or{ position: absolute; top: 211px; background-image: url(Or.png); -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); } .hm-door.nand{ position: absolute; top: -211px; background-image: url(Nand.png); -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg);

} .hm-door.nor{ background-image: url(Nor.png); position: absolute; top: 0px; -webkit-transform: translateZ(-212px) rotateX(180deg); -moz-transform: translateZ(-212px) rotateX(180deg); -ms-transform: translateZ(-212px) rotateX(180deg); transform: translateZ(-212px) rotateX(180deg); } .hm-door.empty{ background-image: url(Door-empty.png); position: absolute; top: 0px; left: 211px; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-backface-visibility: visible; -moz-backface-visibility: visible; backface-visibility: visible; } .hm-part2-circle{ width: 850px; height: 850px; background-image: url(Part2-circle.png); position: absolute; top: -180px; left: 150px; -webkit-animation: circle 2.5s linear infinite; -moz-animation: circle 2.5s linear infinite; animation: circle 2.5s linear infinite; } .hm-part2-header{ position: absolute; top: 164px; left: 550px; -webkit-transform: translateZ(400px); -moz-transform: translateZ(400px); transform: translateZ(400px); } .hm-part3-axis{ width: 1px; height: 1px; position: absolute; bottom: -60px; left: 200px; -webkit-transition: width 2s, height 2s; -moz-transition: width 2s, height 2s; transition: width 2s, height 2s; overflow: hidden; } .hm-part3 .hm-part3-axis{ width: 888px; height: 585px; } .hm-part3-axis img{ position: absolute; bottom: 0px; left: 0px; } .hm-part3-header{ position: absolute; left: -152px; top: 270px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); transform: translateZ(50px); } .hm-part3-line{ position: absolute; top: 10px; left: 270px; opacity: 0;

} .hm-part3 .hm-part3-line{ opacity: 1; -webkit-transition: opacity 2s 2s; -moz-transition: opacity 2s 2s; transition: opacity 2s 2s; } .hm-part3-ball{ position: absolute; left: 249px; top: 470px; } .hm-part3 .hm-part3-ball{ -webkit-animation: ball-y 2.5s 3s linear infinite; -moz-animation: ball-y 2.5s 3s linear infinite; animation: ball-y 2.5s 3s linear infinite; } .hm-part3 .hm-part3-ball img{ -webkit-animation: ball-x 2.5s 3s linear infinite; -moz-animation: ball-x 2.5s 3s linear infinite; animation: ball-x 2.5s 3s linear infinite; } .hm-part3-fx{ position: absolute; left: 450px; top: 150px; }

  1. hm-part3-fx-25{

position: absolute; left: 120px; top: -30px; left: 122px; top: -24px; -webkit-transform-origin:-6% 66%; -moz-transform-origin:-6% 66%; -ms-transform-origin:-6% 66%; transform-origin:-6% 66%; -webkit-animation: uncircle 2s 1s linear infinite; -moz-animation: uncircle 2s 1s linear infinite; animation: uncircle 2s 1s linear infinite; }

  1. hm-part4 > div{

position: absolute; } .hm-part4-require{ top: -20px; left: 0px; -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .hm-part4-doc{ top: 310px; left: -97px; -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); transform: translateZ(20px); } .hm-part4-proj{ top: 74px; left: 133px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); transform: translateZ(50px); } .hm-part4-policy{ top: 370px; left: 517px; -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); transform: translateZ(20px); } .hm-part4-team{ top: 330px; left: 709px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); transform: translateZ(50px); } .hm-part4-headers{ 

   background: #00aeef;
   top: 213px; 
   left: 515px;
   width: 351px;
   height: 110px;

-webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); transform: translateZ(50px); } .hm-part4-header{ -webkit-animation: h-switch 1.2s infinite ease-in-out alternate; -moz-animation: h-switch 1.2s infinite ease-in-out alternate; animation: h-switch 1.2s infinite ease-in-out alternate; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; width: 351px; } .hm-part4-header img{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }

  1. hm-part4-header2{

-webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); position: absolute; top: 0px; } .hm-part4-download{ left: 445px; top:10px; -webkit-transform: translateZ(70px); -moz-transform: translateZ(70px); transform: translateZ(70px); } @-webkit-keyframes h-switch{ from{ -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } to { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } }@-moz-keyframes h-switch{ from{ -moz-transform: rotateX(0deg); transform: rotateX(0deg); } to { -moz-transform: rotateX(180deg); transform: rotateX(180deg); } }@keyframes h-switch{ from{ -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } to { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); transform: rotateX(180deg); } } @-webkit-keyframes ball-x{ from{ -webkit-transform: translateX(0); transform: translateX(0); } to{ -webkit-transform: translateX(700px); transform: translateX(700px); } }@-moz-keyframes ball-x{ from{ -moz-transform: translateX(0); transform: translateX(0); } to{ -moz-transform: translateX(700px); transform: translateX(700px); } }@keyframes ball-x{ from{ -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } to{ -webkit-transform: translateX(700px); -moz-transform: translateX(700px); transform: translateX(700px); } } @-webkit-keyframes ball-y{ 0%{ -webkit-transform: translateY(0); transform: translateY(0); } 5%{ -webkit-transform: translateY(-110px); transform: translateY(-110px); } 10%{ -webkit-transform: translateY(-200px); transform: translateY(-200px); } 20%{ -webkit-transform: translateY(-300px); transform: translateY(-300px); } 30%{ -webkit-transform: translateY(-360px); transform: translateY(-360px); } 40%{ -webkit-transform: translateY(-400px); transform: translateY(-400px); } 50%{ -webkit-transform: translateY(-435px); transform: translateY(-435px); } 70%{ -webkit-transform: translateY(-470px); transform: translateY(-470px); } 90%{ -webkit-transform: translateY(-489px); transform: translateY(-489px); } 100%{ -webkit-transform: translateY(-480px); transform: translateY(-480px); } } @-moz-keyframes ball-y{ 0%{ -moz-transform: translateY(0); transform: translateY(0); } 5%{ -moz-transform: translateY(-110px); transform: translateY(-110px); } 10%{ -moz-transform: translateY(-200px); transform: translateY(-200px); } 20%{ -moz-transform: translateY(-300px); transform: translateY(-300px); } 30%{ -moz-transform: translateY(-360px); transform: translateY(-360px); } 40%{ -moz-transform: translateY(-400px); transform: translateY(-400px); } 50%{ -moz-transform: translateY(-435px); transform: translateY(-435px); } 70%{ -moz-transform: translateY(-470px); transform: translateY(-470px); } 90%{ -moz-transform: translateY(-489px); transform: translateY(-489px); } 100%{ -moz-transform: translateY(-480px); transform: translateY(-480px); } } @keyframes ball-y{ 0%{ -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 5%{ -webkit-transform: translateY(-110px); -moz-transform: translateY(-110px); transform: translateY(-110px); } 10%{ -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); transform: translateY(-200px); } 20%{ -webkit-transform: translateY(-300px); -moz-transform: translateY(-300px); transform: translateY(-300px); } 30%{ -webkit-transform: translateY(-360px); -moz-transform: translateY(-360px); transform: translateY(-360px); } 40%{ -webkit-transform: translateY(-400px); -moz-transform: translateY(-400px); transform: translateY(-400px); } 50%{ -webkit-transform: translateY(-435px); -moz-transform: translateY(-435px); transform: translateY(-435px); } 70%{ -webkit-transform: translateY(-470px); -moz-transform: translateY(-470px); transform: translateY(-470px); } 90%{ -webkit-transform: translateY(-489px); -moz-transform: translateY(-489px); transform: translateY(-489px); } 100%{ -webkit-transform: translateY(-480px); -moz-transform: translateY(-480px); transform: translateY(-480px); } } @-webkit-keyframes circle{ from{ -webkit-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -webkit-transform: rotateY(0deg) rotateZ(360deg); transform: rotateY(0deg) rotateZ(360deg); } } @-moz-keyframes circle{ from{ -moz-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -moz-transform: rotateY(0deg) rotateZ(360deg); transform: rotateY(0deg) rotateZ(360deg); } } @keyframes circle{ from{ -webkit-transform: rotateY(0deg) rotateZ(0deg); -moz-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -webkit-transform: rotateY(0deg) rotateZ(360deg); -moz-transform: rotateY(0deg) rotateZ(360deg); transform: rotateY(0deg) rotateZ(360deg); } } @-webkit-keyframes uncircle{ from{ -webkit-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -webkit-transform: rotateY(0deg) rotateZ(-360deg); transform: rotateY(0deg) rotateZ(-360deg); } } @-moz-keyframes uncircle{ from{ -moz-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -moz-transform: rotateY(0deg) rotateZ(-360deg); transform: rotateY(0deg) rotateZ(-360deg); } } @keyframes uncircle{ from{ -webkit-transform: rotateY(0deg) rotateZ(0deg); -moz-transform: rotateY(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateZ(0deg); } to { -webkit-transform: rotateY(0deg) rotateZ(-360deg); -moz-transform: rotateY(0deg) rotateZ(-360deg); transform: rotateY(0deg) rotateZ(-360deg); } }

@-webkit-keyframes doors{ from{ -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } to { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } }

@-moz-keyframes doors{ from{ -moz-transform: rotateX(0deg); transform: rotateX(0deg); } to { -moz-transform: rotateX(360deg); transform: rotateX(360deg); } }

@keyframes doors{ from{ -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); } to { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); transform: rotateX(360deg); } } @-webkit-keyframes line-star{ from{ -webkit-transform: translateX(0px); transform: translateX(0px); } to{ -webkit-transform: translateX(884px); transform: translateX(884px); } } @-moz-keyframes line-star{ from{ -moz-transform: translateX(0px); transform: translateX(0px); } to{ -moz-transform: translateX(884px); transform: translateX(884px); } } @keyframes line-star{ from{ -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } to{ -webkit-transform: translateX(884px); -moz-transform: translateX(884px); transform: translateX(884px); } } @-webkit-keyframes rotate{ from{ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to{ -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-moz-keyframes rotate{ from{ -moz-transform: rotateY(0deg); transform: rotateY(0deg); } to{ -moz-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes rotate{ from{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); } to{ -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes float{ 0% { 

   -webkit-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
           transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }
 50% {
   -webkit-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
           transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }
 100% {
   -webkit-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
           transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }

} @-moz-keyframes float{ 0% { 

   -moz-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
        transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }
 50% {
   -moz-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
        transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }
 100% {
   -moz-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
        transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }

} @keyframes float{ 0% { 

   -webkit-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
           transform: translateX(0) translateY(0px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }
 50% {
   -webkit-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
           transform: translateX(0) translateY(10px) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }
 100% {
   -webkit-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
      -moz-transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
           transform: translateX(0px) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
 }

}

.hm-sequence{ position: fixed; right: 3%; top: 40%; } .hm-sequence div{ width: 14px; height: 14px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background-color: white; opacity: .2; cursor: pointer; } .hm-sequence div + div{ margin-top: 18px; } .hm-part1 #hm-sequence1 , .hm-part2 #hm-sequence2 , .hm-part3 #hm-sequence3 , .hm-part4 #hm-sequence4{ opacity: .9; } .hm-skip{ color: white; font-size: 26px; position: fixed; bottom: 20px; right: 50px; cursor: pointer; } .igemlogo { position: fixed; top: 20px; right: 20px; } .hm-part4 .hm-skip{ display: none; } .css3-icon{ height:20px; width:20px; display:block; position:relative; display: inline; } .down-triangle{ height:10px; } .down-triangle:before{ content:; height:0; width:0; display:block; border:10px transparent solid; border-bottom-width:0; border-top-color:#fff; position:absolute; top:10px; left:7px; }

Retrieved from "http://2014.igem.org/Team:SYSU-Software/overview.css"