85 lines
2.5 KiB
CSS
85 lines
2.5 KiB
CSS
|
/*
|
||
|
|
interval: time between spans appearing
|
||
|
|
transitionTime: the time it takes for the span to finish "sliding" in to place.
|
||
|
|
transitionTime should be <= interval/2;
|
||
|
|
n: total number of spans sliding in and out
|
||
|
|
n should be > 1
|
||
|
|
nth: the value in "nth-child())"
|
||
|
|
*/
|
||
|
|
.sliding-vertical{
|
||
|
|
display: inline;
|
||
|
|
text-indent: 8px;
|
||
|
|
}
|
||
|
|
.sliding-vertical span{
|
||
|
|
animation: topToBottom 5s linear infinite 0s;/* interval * n */
|
||
|
|
-ms-animation: topToBottom 5s linear infinite 0s;/* interval * n */
|
||
|
|
-webkit-animation: topToBottom 5s linear infinite 0s;/* interval * n */
|
||
|
|
opacity: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.sliding-vertical span:nth-child(2){
|
||
|
|
animation-delay: 2.5s;/* (nth - 1) * interval */
|
||
|
|
-ms-animation-delay: 2.5s;/* (nth - 1) * interval */
|
||
|
|
-webkit-animation-delay: 2.5s;/* (nth - 1) * interval */
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
.sliding-vertical span:nth-child(3){
|
||
|
|
animation-delay: 5s;
|
||
|
|
-ms-animation-delay: 5s;
|
||
|
|
-webkit-animation-delay: 5s;
|
||
|
|
}
|
||
|
|
.sliding-vertical span:nth-child(4){
|
||
|
|
animation-delay: 7.5s;
|
||
|
|
-ms-animation-delay: 7.5s;
|
||
|
|
-webkit-animation-delay: 7.5s;
|
||
|
|
}
|
||
|
|
.sliding-vertical span:nth-child(5){
|
||
|
|
animation-delay: 10s;
|
||
|
|
-ms-animation-delay: 10s;
|
||
|
|
-webkit-animation-delay: 10s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sliding-vertical span:nth-child(6){
|
||
|
|
animation-delay: 12.5s;
|
||
|
|
-ms-animation-delay: 12.5s;
|
||
|
|
-webkit-animation-delay: 7.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sliding-vertical span:nth-child(7){
|
||
|
|
animation-delay: 15s;
|
||
|
|
-ms-animation-delay: 15s;
|
||
|
|
-webkit-animation-delay: 15s;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
/*topToBottom Animation*/
|
||
|
|
@keyframes topToBottom{
|
||
|
|
0% { opacity: 0; transform: translateY(-50px); }
|
||
|
|
12.5% { opacity: 1; transform: translateY(0px); }/* transitionTime * interval * n */
|
||
|
|
50% { opacity: 1; transform: translateY(0px); } /* interval/(interval * n) */
|
||
|
|
62.5% { opacity: 0; transform: translateY(50px); } /* interval/(interval * n) + transitionTime */
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes topToBottom{
|
||
|
|
0% { opacity: 0; -moz-transform: translateY(-50px); }
|
||
|
|
12.5% { opacity: 1; -moz-transform: translateY(0px); }
|
||
|
|
50% { opacity: 1; -moz-transform: translateY(0px); }
|
||
|
|
62.5% { opacity: 0; -moz-transform: translateY(50px); }
|
||
|
|
}
|
||
|
|
@-webkit-keyframes topToBottom{
|
||
|
|
0% { opacity: 0; -webkit-transform: translateY(-50px); }
|
||
|
|
12.5% { opacity: 1; -webkit-transform: translateY(0px); }
|
||
|
|
50% { opacity: 1; -webkit-transform: translateY(0px); }
|
||
|
|
62.5% { opacity: 0; -webkit-transform: translateY(50px); }
|
||
|
|
}
|
||
|
|
@-ms-keyframes topToBottom{
|
||
|
|
0% { opacity: 0; -ms-transform: translateY(-50px); }
|
||
|
|
12.5% { opacity: 1; -ms-transform: translateY(0px); }
|
||
|
|
25% { opacity: 1; -ms-transform: translateY(0px); }
|
||
|
|
62.5% { opacity: 0; -ms-transform: translateY(50px); }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.install-for {
|
||
|
|
margin-top: 3.1111111113em;
|
||
|
|
}
|