Reputation: 57
I am trying to do a really simple rotating word thing based on CSS. I have two questions though:
1) How do I make the fade quicker at the end? The words overlap in a way that I don't like at the moment
2) If a rotating word is long it messes and overlaps with the next words. I have made some spaces to make room for this, but surely there must be a better way?
Here is a jsfiddle.
https://jsfiddle.net/cqrauey4/
/*/
ROTATING WORDS
/*/
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: auto;
color: #0f269e;
}
.rw-words-1 span{
-webkit-animation: rotateWordsFirst 14s linear infinite 0s;
-ms-animation: rotateWordsFirst 14s linear infinite 0s;
animation: rotateWordsFirst 14s linear infinite 0s;
}
}
.rw-words span:nth-child(1) {
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
color: #0f269e;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
color: #0f269e;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
color: #0f269e;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #0f269e;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
color: #0f269e;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
color: #0f269e;
}
.rw-words span:nth-child(7) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #0f269e;
}
}
@-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; }
}
}
@media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
.rw-sentence { font-size: 9px; }
}
<span>The boy
<div class="rw-words rw-words-1">
<span>sees </span>
<span>wants </span>
<span>uses </span>
<span>finds </span>
<span>needs </span>
<span>tries </span>
<span>loves </span>
</div> the girl.</span>
Upvotes: 1
Views: 357
Reputation: 14873
I advise you to make several modifications in your code. First put the words the girl.
in a span
tag to easily manipulate it. Then apply some css
to it to have the space for the animated words using padding-left
just like this:
.rw-words{
display: inline;
}
#girlWord {
margin-left: 40px; /* <-- Add space for the animated words */
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: auto;
color: #0f269e;
}
.rw-words-1 span{
animation: rotateWordsFirst 14s linear infinite 0s;
}
.rw-words span:nth-child(1) {
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
color: #0f269e;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
color: #0f269e;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
color: #0f269e;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #0f269e;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
color: #0f269e;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
color: #0f269e;
}
.rw-words span:nth-child(7) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #0f269e;
}
@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: 0; height: 60px; }
25% { opacity: 0; height: 60px; }
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; }
}
<span>The boy
<div class="rw-words rw-words-1">
<span>sees </span>
<span>wants </span>
<span>uses </span>
<span>finds </span>
<span>needs </span>
<span>tries </span>
<span>loves </span>
</div>
<span id="girlWord">the girl.</span> <!-- Wrap the word in a span -->
</span>
Upvotes: 1
Reputation: 16214
Without JS (or possibly some amazing CSS wizardry) you're going to struggle with the spacing for the 'rotating' words. So instead why not make a feature of it? EG:
.rw-words {
display: inline-block;
border: 2px solid blue;
border-width: 0 0 2px 0;
height: 1.1em;
width: 4em;
vertical-align: middle;
overflow: hidden;
position: relative;
}
.rw-words span {
display: block;
position: absolute;
bottom: -100%;
opacity: 0;
overflow: hidden;
width: auto;
color: #0f269e;
}
.rw-words-1 span {
-webkit-animation: rotateWordsFirst 14s linear infinite 0s;
-ms-animation: rotateWordsFirst 14s linear infinite 0s;
animation: rotateWordsFirst 14s linear infinite 0s;
}
.rw-words span:nth-child(1) {
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
color: #0f269e;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
color: #0f269e;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
color: #0f269e;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #0f269e;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
color: #0f269e;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
color: #0f269e;
}
.rw-words span:nth-child(7) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #0f269e;
}
@-webkit-keyframes rotateWordsFirst {
0% {
opacity: 0;
bottom: 0;
}
3% {
opacity: 1;
bottom: 0;
}
10% {
opacity: 1;
bottom: 0;
}
15% {
opacity: 0;
bottom: 100%;
}
}
@-ms-keyframes rotateWordsFirst {
0% {
opacity: 0;
bottom: 0;
}
3% {
opacity: 1;
bottom: 0;
}
10% {
opacity: 1;
bottom: 0;
}
15% {
opacity: 0;
bottom: 100%;
}
}
@keyframes rotateWordsFirst {
0% {
opacity: 0;
bottom: 0;
}
3% {
opacity: 1;
bottom: 0;
}
10% {
opacity: 1;
bottom: 0;
}
15% {
opacity: 0;
bottom: 100%;
}
}
@media screen and (max-width: 768px) {
.rw-sentence {
font-size: 18px;
}
}
@media screen and (max-width: 320px) {
.rw-sentence {
font-size: 9px;
}
}
<div>The boy
<div class="rw-words rw-words-1">
<span>sees</span>
<span>wants</span>
<span>finds</span>
<span>needs</span>
<span>tries</span>
<span>loves</span>
<span>respects</span>
</div> the girl.</div>
Upvotes: 2