/* 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 15s linear infinite 0s;/* interval * n */ -ms-animation: topToBottom 15s linear infinite 0s;/* interval * n */ -webkit-animation: topToBottom 15s 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: 12.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); } 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) */ } @-moz-keyframes topToBottom{ 0% { opacity: 0; -moz-transform: translateY(-50px); } 6.667% { opacity: 1; -moz-transform: translateY(0px); } 16.667% { opacity: 1; -moz-transform: translateY(0px); } 23.333% { opacity: 0; -moz-transform: translateY(50px); } } @-webkit-keyframes topToBottom{ 0% { opacity: 0; -webkit-transform: translateY(-50px); } 6.667% { opacity: 1; -webkit-transform: translateY(0px); } 16.667% { opacity: 1; -webkit-transform: translateY(0px); } 23.333% { opacity: 0; -webkit-transform: translateY(50px); } } @-ms-keyframes topToBottom{ 0% { opacity: 0; -ms-transform: translateY(-50px); } 6.667% { opacity: 1; -ms-transform: translateY(0px); } 16.667% { opacity: 1; -ms-transform: translateY(0px); } 23.333% { opacity: 0; -ms-transform: translateY(50px); } } .install-for { margin-top: 3.1111111113em; }