Skip to content

Instantly share code, notes, and snippets.

@mushfiqweb
Created April 24, 2017 14:50
Show Gist options
  • Save mushfiqweb/1a70384ff66c98f9cdff7a1afbeaa0f1 to your computer and use it in GitHub Desktop.
Save mushfiqweb/1a70384ff66c98f9cdff7a1afbeaa0f1 to your computer and use it in GitHub Desktop.
.rw-words{
display: inline;
text-indent: 10px;
text-align: left;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
text-align: left;
}
.rw-words-1 span{
-webkit-animation: rotateWordsFirst 18s linear infinite 0s;
-ms-animation: rotateWordsFirst 18s linear infinite 0s;
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #7a6b9d;
}
@-webkit-keyframes rotateWordsFirst {
0% { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
0% { opacity: 1; -ms-animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
@-webkit-keyframes rotateWordsSecond {
0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
0% { opacity: 1; -ms-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
.rw-sentence { font-size: 9px; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment