Team:TU Eindhoven/Style:Slider

From 2014.igem.org

(Difference between revisions)
 
(11 intermediate revisions not shown)
Line 10: Line 10:
transition: background-position 1s ease-out 0.3s;
transition: background-position 1s ease-out 0.3s;
text-align:center;
text-align:center;
 +
z-index:1;
}
}
.da-slide{
.da-slide{
Line 51: Line 52:
width: 77%;
width: 77%;
top: 120px;
top: 120px;
-
font-size: 4vw;
+
font-size: 3em;
font-weight: 600;
font-weight: 600;
white-space: nowrap;
white-space: nowrap;
Line 59: Line 60:
.da-slide p{
.da-slide p{
top: 250px;
top: 250px;
-
color: #c9c9c9;
+
color: #FFFFFF;
-
font-size: 1.5vw;
+
font-size: 1.5em;
height: auto;
height: auto;
overflow: hidden;
overflow: hidden;
font-weight: normal;
font-weight: normal;
-
line-height: 2vw;
+
line-height: 60px;
text-align: center;
text-align: center;
margin: 0 auto;
margin: 0 auto;
width: 77%;
width: 77%;
 +
}
 +
.da-slide p a{
 +
color: #FFFFFF;
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
.da-slide p a:hover{
 +
color: #00BAC6;
 +
        text-decoration: none;
}
}
.da-img{
.da-img{
Line 569: Line 581:
-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
-
}
 
-
@-webkit-keyframes toLeftAnim1{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-webkit-keyframes toLeftAnim2{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-webkit-keyframes toLeftAnim3{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-webkit-keyframes toLeftAnim4{
 
-
0%{ left: 60%;  opacity: 1; }
 
-
70%{ left: 30%;  opacity: 0; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
 
-
@-moz-keyframes toLeftAnim1{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-moz-keyframes toLeftAnim2{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-moz-keyframes toLeftAnim3{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-moz-keyframes toLeftAnim4{
 
-
0%{ left: 60%;  opacity: 1; }
 
-
70%{ left: 30%;  opacity: 0; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
 
-
@-o-keyframes toLeftAnim1{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-o-keyframes toLeftAnim2{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-o-keyframes toLeftAnim3{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-o-keyframes toLeftAnim4{
 
-
0%{ left: 60%;  opacity: 1; }
 
-
70%{ left: 30%;  opacity: 0; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
 
-
@-ms-keyframes toLeftAnim1{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-ms-keyframes toLeftAnim2{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-ms-keyframes toLeftAnim3{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@-ms-keyframes toLeftAnim4{
 
-
0%{ left: 60%;  opacity: 1; }
 
-
70%{ left: 30%;  opacity: 0; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
 
-
@keyframes toLeftAnim1{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@keyframes toLeftAnim2{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
30%{ left: 15%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@keyframes toLeftAnim3{
 
-
0%{ left: 10%;  opacity: 1; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@keyframes toLeftAnim4{
 
-
0%{ left: 60%;  opacity: 1; }
 
-
70%{ left: 30%;  opacity: 0; }
 
-
100%{ left: -50%; opacity: 0; }
 
-
}
 
-
@media only screen and (max-width: 1440px) and (min-width:1366px) {
 
-
.da-dots {
 
-
bottom: 55px;
 
-
}
 
-
.da-arrows span {
 
-
top: 43%;
 
-
}
 
-
}
 
-
@media only screen and (max-width: 1366px) and (min-width:1280px) {
 
-
.da-dots {
 
-
bottom: 55px;
 
-
}
 
-
.da-arrows span {
 
-
top: 43%;
 
-
}
 
-
}
 
-
@media only screen and (max-width: 1024px) and (min-width:768px) {
 
-
.da-dots {
 
-
width:100%
 
-
}
 
-
.da-slider {
 
-
height: 430px;
 
-
}
 
-
.da-slide .da-link {
 
-
margin-left: 30%;
 
-
}
 
-
}
 
-
@media only screen and (max-width: 768px) and (min-width:640px) {
 
-
.da-dots {
 
-
width:100%
 
-
}
 
-
.da-slider {
 
-
height:380px;
 
-
}
 
-
.da-slide .da-link {
 
-
margin-left: 28%;
 
-
}
 
-
.da-slide h2{
 
-
top:70px;
 
-
}
 
-
.da-slide p{
 
-
top: 139px;
 
-
}
 
-
.da-slide .da-link {
 
-
top: 220px;
 
-
}
 
-
}
 
-
@media only screen and (max-width: 640px) and (min-width:480px) {
 
-
.da-dots {
 
-
width:100%
 
-
}
 
-
.da-slider {
 
-
height:380px;
 
-
}
 
-
.da-slide .da-link {
 
-
margin-left: 28%;
 
-
}
 
-
.da-slide h2{
 
-
font-size: 3vw;
 
-
top:70px;
 
-
}
 
-
.da-slide p{
 
-
top: 139px;
 
-
font-size:1vw;
 
-
}
 
-
.da-slide .da-link {
 
-
top: 220px;
 
-
}
 
-
}
 
-
@media only screen and (max-width: 480px) and (min-width:320px) {
 
-
.da-dots {
 
-
width:100%
 
-
}
 
-
.da-slider {
 
-
height: 300px;
 
-
}
 
-
.da-slide .da-link {
 
-
margin-left: 22%;
 
-
}
 
-
.da-slide h2{
 
-
font-size: 1.5em;
 
-
top: 35px;
 
-
}
 
-
.da-slide p{
 
-
top: 100px;
 
-
font-size:0.8125em;
 
-
}
 
-
.da-slide .da-link {
 
-
top:170px;
 
-
height:35px;
 
-
width:126px;
 
-
line-height:38px;
 
-
font-size:0.875em;
 
-
}
 
-
.da-arrows span {
 
-
top: 44%;
 
-
}
 
-
}
 
-
@media only screen and (max-width: 320px) and (min-width:240px) {
 
-
.da-dots {
 
-
width:100%
 
-
}
 
-
.da-slider {
 
-
height:280px;
 
-
}
 
-
.da-slide .da-link {
 
-
margin-left: 20%;
 
-
}
 
-
.da-slide h2{
 
-
top: 50px;
 
-
font-size: 1.1em;
 
-
}
 
-
.da-slide p{
 
-
top: 80px;
 
-
font-size:12px;
 
-
}
 
-
.da-slide .da-link {
 
-
top:170px;
 
-
height:30px;
 
-
width:120px;
 
-
line-height:33px;
 
-
font-size:0.875em;
 
-
}
 
-
.da-arrows span {
 
-
top: 44%;
 
-
}
 
}
}

Latest revision as of 08:26, 12 August 2014

.da-slider{ width: 100%; height:675px; position: relative; overflow: hidden; -webkit-transition: background-position 1s ease-out 0.3s; -moz-transition: background-position 1s ease-out 0.3s; -o-transition: background-position 1s ease-out 0.3s; -ms-transition: background-position 1s ease-out 0.3s; transition: background-position 1s ease-out 0.3s; text-align:center; z-index:1; } .da-slide{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; text-align: left; } .da-slide-current{ z-index: 1000; } .da-slider-fb .da-slide{ left: 100%; } .da-slider-fb .da-slide.da-slide-current{ left: 0px; } .da-slide h2, .da-slide p, .da-slide .da-link, .da-slide .da-img{ position: absolute; opacity: 0; left: 110%; } .da-slider-fb .da-slide h2, .da-slider-fb .da-slide p, .da-slider-fb .da-slide .da-link{ left: 10%; opacity: 1; } .da-slider-fb .da-slide .da-img{ left: 60%; opacity: 1; } .da-slide h2 { font-family: 'Open Sans', sans-serif; color: #FFFFFF; width: 77%; top: 120px; font-size: 3em; font-weight: 600; white-space: nowrap; z-index: 10; text-align: center; } .da-slide p{ top: 250px; color: #FFFFFF; font-size: 1.5em; height: auto; overflow: hidden; font-weight: normal; line-height: 60px; text-align: center; margin: 0 auto; width: 77%; } .da-slide p a{ color: #FFFFFF; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .da-slide p a:hover{ color: #00BAC6;

       text-decoration: none;

} .da-img{ display:none; } .da-slide .da-img{ text-align: center; width: 30%; top: 51px; height: 256px; line-height: 320px; left: 110%; /*60%*/ } .da-slide .da-link{ }

.da-link:hover{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #71b5d5), color-stop(1, #79bbff) );

background:-moz-linear-gradient( center top, #71b5d5 5%, #79bbff 100% ); background-color:#71b5d5;

}

.da-dots{ width: 99%; position: absolute; text-align: center; left: 0px; bottom: 20px; z-index: 2000; -moz-user-select: none; -webkit-user-select: none; } .da-dots span{ display: inline-block; position: relative; width: 30px; height:30px; background: url('https://static.igem.org/mediawiki/2014/b/b4/Slide_TU_Eindhoven.png') no-repeat 10px 1px; margin: 3px; cursor: pointer; } .da-dots span.da-dots-current:after{ content: ; width: 30px; height:30px; position: absolute; top: 1px; left: 1px; background: url('https://static.igem.org/mediawiki/2014/b/b4/Slide_TU_Eindhoven.png') no-repeat -27px 0px; display: inline-block; } .da-arrows{ -moz-user-select: none; -webkit-user-select: none; } .da-arrows span{ position: absolute; top: 40%; cursor: pointer; z-index: 2000; opacity: 0; height: 60px; width: 32px; -webkit-transition: opacity 0.4s ease-in-out-out 0.2s; -moz-transition: opacity 0.4s ease-in-out-out 0.2s; -o-transition: opacity 0.4s ease-in-out-out 0.2s; -ms-transition: opacity 0.4s ease-in-out-out 0.2s; transition: opacity 0.4s ease-in-out-out 0.2s; } .da-arrows-prev{ background: url('https://static.igem.org/mediawiki/2014/5/52/Slide_icons_TU_Eindhoven.png') no-repeat -40px 0px; } .da-arrows-next{ background: url('https://static.igem.org/mediawiki/2014/5/52/Slide_icons_TU_Eindhoven.png') no-repeat -0px 0px; } .da-slider:hover .da-arrows span{ opacity: 1; } .da-arrows span:after{ content: ; position: absolute; width: 20px; height: 20px; top: 5px; left: 5px; background: transparent url(../images/arrows.png) no-repeat top left; border-radius: 50%; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); } .da-arrows span:hover:after{ box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } .da-arrows span:active:after{ box-shadow: 1px 1px 1px rgba(255,255,255,0.1); } .da-arrows span.da-arrows-next:after{ background-position: top right; } .da-arrows span.da-arrows-prev{ left: 15px; } .da-arrows span.da-arrows-next{ right: 15px; }

.da-slide-current h2, .da-slide-current p, .da-slide-current .da-link{ left: 10%; opacity: 1; } .da-slide-current .da-img{ left: 60%; opacity: 1; } /* Animation classes and animations */

/* Slide in from the right*/ .da-slide-fromright h2{ -webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both; -moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both; -o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both; -ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both; animation: fromRightAnim1 0.6s ease-in-out 0.8s both; } .da-slide-fromright p{ -webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both; -moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both; -o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both; -ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both; animation: fromRightAnim2 0.6s ease-in-out 0.8s both; } .da-slide-fromright .da-link{ -webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both; -moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both; -o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both; -ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both; animation: fromRightAnim3 0.4s ease-in-out 1.2s both; } .da-slide-fromright .da-img{ -webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both; -moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both; -o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both; -ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both; animation: fromRightAnim4 0.6s ease-in-out 0.8s both; } @-webkit-keyframes fromRightAnim1{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-webkit-keyframes fromRightAnim2{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-webkit-keyframes fromRightAnim3{ 0%{ left: 110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-webkit-keyframes fromRightAnim4{ 0%{ left: 110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }

@-moz-keyframes fromRightAnim1{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-moz-keyframes fromRightAnim2{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-moz-keyframes fromRightAnim3{ 0%{ left: 110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-moz-keyframes fromRightAnim4{ 0%{ left: 110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }

@-o-keyframes fromRightAnim1{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-o-keyframes fromRightAnim2{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-o-keyframes fromRightAnim3{ 0%{ left: 110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-o-keyframes fromRightAnim4{ 0%{ left: 110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }

@-ms-keyframes fromRightAnim1{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-ms-keyframes fromRightAnim2{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-ms-keyframes fromRightAnim3{ 0%{ left: 110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-ms-keyframes fromRightAnim4{ 0%{ left: 110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }

@keyframes fromRightAnim1{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromRightAnim2{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromRightAnim3{ 0%{ left: 110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromRightAnim4{ 0%{ left: 110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } } /* Slide in from the left*/ .da-slide-fromleft h2{ -webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both; -moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both; -o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both; -ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both; animation: fromLeftAnim1 0.6s ease-in-out 0.6s both; } .da-slide-fromleft p{ -webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both; -moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both; -o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both; -ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both; animation: fromLeftAnim2 0.6s ease-in-out 0.6s both; } .da-slide-fromleft .da-link{ -webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both; -moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both; -o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both; -ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both; animation: fromLeftAnim3 0.4s ease-in-out 1.2s both; } .da-slide-fromleft .da-img{ -webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both; -moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both; -o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both; -ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both; animation: fromLeftAnim4 0.6s ease-in-out 0.6s both; } @-webkit-keyframes fromLeftAnim1{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-webkit-keyframes fromLeftAnim2{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-webkit-keyframes fromLeftAnim3{ 0%{ left: -110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-webkit-keyframes fromLeftAnim4{ 0%{ left: -110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }

@-moz-keyframes fromLeftAnim1{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-moz-keyframes fromLeftAnim2{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-moz-keyframes fromLeftAnim3{ 0%{ left: -110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-moz-keyframes fromLeftAnim4{ 0%{ left: -110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }

@-o-keyframes fromLeftAnim1{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-o-keyframes fromLeftAnim2{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-o-keyframes fromLeftAnim3{ 0%{ left: -110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-o-keyframes fromLeftAnim4{ 0%{ left: -110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }

@-ms-keyframes fromLeftAnim1{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-ms-keyframes fromLeftAnim2{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-ms-keyframes fromLeftAnim3{ 0%{ left: -110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @-ms-keyframes fromLeftAnim4{ 0%{ left: -110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }

@keyframes fromLeftAnim1{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromLeftAnim2{ 0%{ left: -110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromLeftAnim3{ 0%{ left: -110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromLeftAnim4{ 0%{ left: -110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } } /* Slide out to the right */ .da-slide-toright h2{ -webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both; -moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both; -o-animation: toRightAnim1 0.6s ease-in-out 0.6s both; -ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both; animation: toRightAnim1 0.6s ease-in-out 0.6s both; } .da-slide-toright p{ -webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both; -moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both; -o-animation: toRightAnim2 0.6s ease-in-out 0.3s both; -ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both; animation: toRightAnim2 0.6s ease-in-out 0.3s both; } .da-slide-toright .da-link{ -webkit-animation: toRightAnim3 0.4s ease-in-out both; -moz-animation: toRightAnim3 0.4s ease-in-out both; -o-animation: toRightAnim3 0.4s ease-in-out both; -ms-animation: toRightAnim3 0.4s ease-in-out both; animation: toRightAnim3 0.4s ease-in-out both; } .da-slide-toright .da-img{ -webkit-animation: toRightAnim4 0.6s ease-in-out both; -moz-animation: toRightAnim4 0.6s ease-in-out both; -o-animation: toRightAnim4 0.6s ease-in-out both; -ms-animation: toRightAnim4 0.6s ease-in-out both; animation: toRightAnim4 0.6s ease-in-out both; } @-webkit-keyframes toRightAnim1{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @-webkit-keyframes toRightAnim2{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @-webkit-keyframes toRightAnim3{ 0%{ left: 10%; opacity: 1; } 99%{ left: 10%; opacity: 0; } 100%{ left: 100%; opacity: 0; } } @-webkit-keyframes toRightAnim4{ 0%{ left: 60%; opacity: 1; } 30%{ left: 55%; opacity: 1; } 100%{ left: 100%; opacity: 0; } }

@-moz-keyframes toRightAnim1{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @-moz-keyframes toRightAnim2{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @-moz-keyframes toRightAnim3{ 0%{ left: 10%; opacity: 1; } 99%{ left: 10%; opacity: 0; } 100%{ left: 100%; opacity: 0; } } @-moz-keyframes toRightAnim4{ 0%{ left: 60%; opacity: 1; } 30%{ left: 55%; opacity: 1; } 100%{ left: 100%; opacity: 0; } }

@-o-keyframes toRightAnim1{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @-o-keyframes toRightAnim2{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @-o-keyframes toRightAnim3{ 0%{ left: 10%; opacity: 1; } 99%{ left: 10%; opacity: 0; } 100%{ left: 100%; opacity: 0; } } @-o-keyframes toRightAnim4{ 0%{ left: 60%; opacity: 1; } 30%{ left: 55%; opacity: 1; } 100%{ left: 100%; opacity: 0; } }

@-ms-keyframes toRightAnim1{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @-ms-keyframes toRightAnim2{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @-ms-keyframes toRightAnim3{ 0%{ left: 10%; opacity: 1; } 99%{ left: 10%; opacity: 0; } 100%{ left: 100%; opacity: 0; } } @-ms-keyframes toRightAnim4{ 0%{ left: 60%; opacity: 1; } 30%{ left: 55%; opacity: 1; } 100%{ left: 100%; opacity: 0; } }

@keyframes toRightAnim1{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @keyframes toRightAnim2{ 0%{ left: 10%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } @keyframes toRightAnim3{ 0%{ left: 10%; opacity: 1; } 99%{ left: 10%; opacity: 0; } 100%{ left: 100%; opacity: 0; } } @keyframes toRightAnim4{ 0%{ left: 60%; opacity: 1; } 30%{ left: 55%; opacity: 1; } 100%{ left: 100%; opacity: 0; } } /* Slide out to the left*/ .da-slide-toleft h2{ -webkit-animation: toLeftAnim1 0.6s ease-in-out both; -moz-animation: toLeftAnim1 0.6s ease-in-out both; -o-animation: toLeftAnim1 0.6s ease-in-out both; -ms-animation: toLeftAnim1 0.6s ease-in-out both; animation: toLeftAnim1 0.6s ease-in-out both; } .da-slide-toleft p{ -webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both; -moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both; -o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both; -ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both; animation: toLeftAnim2 0.6s ease-in-out 0.3s both; } .da-slide-toleft .da-link{ -webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both; -moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both; -o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both; -ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both; animation: toLeftAnim3 0.6s ease-in-out 0.6s both; } .da-slide-toleft .da-img{ -webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both; -moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both; -o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both; -ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both; animation: toLeftAnim4 0.6s ease-in-out 0.5s both; }