/* 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; }