Rotate Sub Titles

There was a point that I was looking for a chunk of code to rotate through a series of sub-headings, using a nice fade-type effect. I didn’t find exactly what I was looking for, so I cobbled together this Code Chunk.

The video below shows you what it looks like:

Here is the CSS:


@import url('http://fonts.googleapis.com/css?family=Open+Sans');
/*Sentence*/
.sentence{
font-family: 'Open Sans', sans-serif;
font-size: 22px;
letter-spacing: 2.0px;
font-style: italic;
font-weight: 200;
color: black;
/*
float: left;
margin-top: 6px;
margin-left: 10px;
line-height: 60px;
padding: 10px 0;
color: #222;
font-size: 30px;
text-align: left;
*/
}
/*Wrapper*/
.wrapper{
/*
background-color: #f5f5f5;
font-family: 'Raleway', sans-serif;
*/
font-family: 'Open Sans', sans-serif;
/*
margin: 100px auto;
padding: 40px 40px;
position: relative;
width: 70%;
*/
}
/*Vertical Sliding*/
.slidingVertical{
display: inline;
text-indent: 8px;
}
.slidingVertical span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
/* color: #00abe9; */
color: black;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*topToBottom Animation*/
@-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }

And the HTML:



Leave a Reply

Your email address will not be published. Required fields are marked *