telebit-relay.js/lib/extensions/admin/static-site-assets/styles/vertical-slide.css

85 lines
2.6 KiB
CSS
Raw Normal View History

2018-07-26 16:50:29 +00:00
/*
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{
2018-08-03 04:53:06 +00:00
animation: topToBottom 15s linear infinite 0s;/* interval * n */
-ms-animation: topToBottom 15s linear infinite 0s;/* interval * n */
-webkit-animation: topToBottom 15s linear infinite 0s;/* interval * n */
2018-07-26 16:50:29 +00:00
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;
2018-08-03 04:53:06 +00:00
-webkit-animation-delay: 12.5s;
2018-07-26 16:50:29 +00:00
}
2018-08-03 04:53:06 +00:00
/*
2018-07-26 16:50:29 +00:00
.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); }
2018-08-03 04:53:06 +00:00
6.667% { opacity: 1; transform: translateY(0px); }/* transitionTime/(interval*n) */
16.667% { opacity: 1; transform: translateY(0px); } /* 1/n */
23.333% { opacity: 0; transform: translateY(50px); } /* (interval + transitionTime)/(n*interval) */
2018-07-26 16:50:29 +00:00
}
@-moz-keyframes topToBottom{
0% { opacity: 0; -moz-transform: translateY(-50px); }
2018-08-03 04:53:06 +00:00
6.667% { opacity: 1; -moz-transform: translateY(0px); }
16.667% { opacity: 1; -moz-transform: translateY(0px); }
23.333% { opacity: 0; -moz-transform: translateY(50px); }
2018-07-26 16:50:29 +00:00
}
@-webkit-keyframes topToBottom{
0% { opacity: 0; -webkit-transform: translateY(-50px); }
2018-08-03 04:53:06 +00:00
6.667% { opacity: 1; -webkit-transform: translateY(0px); }
16.667% { opacity: 1; -webkit-transform: translateY(0px); }
23.333% { opacity: 0; -webkit-transform: translateY(50px); }
2018-07-26 16:50:29 +00:00
}
@-ms-keyframes topToBottom{
0% { opacity: 0; -ms-transform: translateY(-50px); }
2018-08-03 04:53:06 +00:00
6.667% { opacity: 1; -ms-transform: translateY(0px); }
16.667% { opacity: 1; -ms-transform: translateY(0px); }
23.333% { opacity: 0; -ms-transform: translateY(50px); }
2018-07-26 16:50:29 +00:00
}
.install-for {
margin-top: 3.1111111113em;
2018-08-03 04:53:06 +00:00
}