CODEWITHSUNDEEP
cssanimation
chwo
chwo

Reputation: 23

How to rotate multiple words with CSS?

I'm trying to animate a single word using CSS and HTML. I want the word to fade in, stay visible and then fade out and after that, I want to continue with the next word.

I followed this tutorial (http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations), but the problem is that I am unable to understand how to set the percentage of the duration in the @keyframes animation, because in the tutorial it's just written:

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds. We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation for the first words

In my case, my whole animation is 16s long (because I have 4 words * 4s), so 4/16 = 0,25, that's why everything needs to happen before 25%.

Here is my animation code: 

@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); }
    5% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);}
    17% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); }
    20% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

Here is a full demo:

.rw-words-1 span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	-webkit-animation: rotateWord 16s linear infinite 0s;
	-ms-animation: rotateWord 16s linear infinite 0s;
	animation: rotateWord 16s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 4s; 
	-ms-animation-delay: 4s; 
	animation-delay: 4s; 
}
.rw-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 8s; 
	-ms-animation-delay: 8s; 
	animation-delay: 8s; 
}
.rw-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
}

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateX(0px); }
	5% { opacity: 1; -webkit-transform: translateX(0px);}
    17% { opacity: 1; -webkit-transform: translateX(0px); }
	20% { opacity: 0; -webkit-transform: translateX(0px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateX(0px); }
	5% { opacity: 1; -ms-transform: translateX(0px);}
    17% { opacity: 1; -ms-transform: translateX(0px); }
	20% { opacity: 0; -ms-transform: translateX(0px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); }
	5% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);}
    17% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); }
	20% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
<div class="rw-words rw-words-1">
    <span>Word 1</span>
    <span>Word 2</span>
    <span>Word 3</span>
    <span>Word 4</span>
</div>

JSFiddle: https://jsfiddle.net/wx8r5kj7/

So my question is how to set the percentage of the @keyframes animation correctly.

Upvotes: 2

Views: 1885

Answers (1)

Mr Lister
Mr Lister

Reputation: 46569

If the animation is to complete in the first 25%, and you don't want the words to be fully transparant for too long, just reduce the periods during which the opacity is 0.
In your snippet, the opacity is at 0 from 0% to 2% and from 20% to 25%, or 1.12 seconds in total. I changed that to from 24% to 25% only, or about 0.16 second. 

.rw-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    -webkit-animation: rotateWord 16s linear infinite 0s;
    -ms-animation: rotateWord 16s linear infinite 0s;
    animation: rotateWord 16s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 4s; 
    -ms-animation-delay: 4s; 
    animation-delay: 4s; 
}
.rw-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 8s; 
    -ms-animation-delay: 8s; 
    animation-delay: 8s; 
}
.rw-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
}

@-webkit-keyframes rotateWord {
    0% { opacity: 0; -webkit-transform: translateX(0px); }
    3% { opacity: 1; -webkit-transform: translateX(0px);}
    21% { opacity: 1; -webkit-transform: translateX(0px); }
    24% { opacity: 0; -webkit-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; -ms-transform: translateX(0px); }
    3% { opacity: 1; -ms-transform: translateX(0px);}
    21% { opacity: 1; -ms-transform: translateX(0px); }
    24% { opacity: 0; -ms-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; -webkit-transform: translateX(0px); transform: translateX(0px); }
    3% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px);}
    21% { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); }
    24% { opacity: 0; -webkit-transform: translateX(00px); transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
<div class="rw-words rw-words-1">
  <span>Word 1</span>
  <span>Word 2</span>
  <span>Word 3</span>
  <span>Word 4</span>
</div>

Is this what you wanted?

Upvotes: 2

Related Questions