telebit-relay.js/lib/extensions/admin/static-site-assets/styles/vertical-slide.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;
}