css animation not responding to span:nth-child [duplicate] - html

This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 4 years ago.
I want the text's position to animate, word by word, with a slight delay that I control. Right now it's not working.
I've managed to make the delay work with opacity, which I've disabled for now. My main concern is the position. Eventually I'd like to experiment with both elements.
<div class="slide-top"><span>Person</span><span> is</span><span>
a</span><span> designer</span><span> living</span><span> in</span> .
<span> Brooklyn,</span><span> NY.</span></div>
css
.slide-top{
font-family: "Raisonne-regular", Icons /*!Persona*/;
font-weight: normal;
font-style: normal;
padding: 0;
margin: 0;
font-size: 6.8rem;
line-height: 1.2;
color: rgba(0, 0, 0, 1);
text-rendering: optimizeLegibility;
-webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450,
0.940) both;
animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940)
both;
}
#-webkit-keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity:1;
}
100% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
opacity:1;
}
}
#keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity:1;
}
100% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
opacity:1;
} }
.slide-top span:nth-child(2) {
animation-delay: .2s;
}
.slide-top span:nth-child(3) {
animation-delay: .4s;
}
.slide-top span:nth-child(4) {
animation-delay: .6s;
}
.slide-top span:nth-child(5) {
animation-delay: .8s;
}
.slide-top span:nth-child(6) {
animation-delay: 1.0s;
}
.slide-top span:nth-child(7) {
animation-delay: 1.2s;
}
.slide-top span:nth-child(8) {
animation-delay: 1.3s;
}
.slide-top span{
font-family: "Raisonne-regular", Icons /*!Persona*/;
font-weight: normal;
font-style: normal;
padding: 0;
margin: 0;
font-size: 6.8rem;
line-height: 1.2;
color: rgba(0, 0, 0, 1);
text-rendering: optimizeLegibility;
-webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450,
0.940) both;
animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940)
both;
}
https://jsfiddle.net/MayhemII/eL29urpk/1/
I'm super new to all of this, so apologies for labelling/formatting anything wrong.
Thanks!


Try to apply display: inline-block; to your .slide-top span:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
.slide-top {
font-family: "Raisonne-regular", Icons/*!Persona*/
;
font-weight: normal;
font-style: normal;
padding: 0;
margin: 0;
font-size: 6.8rem;
line-height: 1.2;
color: rgba(0, 0, 0, 1);
text-rendering: optimizeLegibility;
-webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
opacity: 1;
}
}
#keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
opacity: 1;
}
}
.slide-top span:nth-child(2) {
animation-delay: .2s;
}
.slide-top span:nth-child(3) {
animation-delay: .4s;
}
.slide-top span:nth-child(4) {
animation-delay: .6s;
}
.slide-top span:nth-child(5) {
animation-delay: .8s;
}
.slide-top span:nth-child(6) {
animation-delay: 1.0s;
}
.slide-top span:nth-child(7) {
animation-delay: 1.2s;
}
.slide-top span:nth-child(8) {
animation-delay: 1.3s;
}
.slide-top span {
font-family: "Raisonne-regular", Icons/*!Persona*/
;
font-weight: normal;
font-style: normal;
padding: 0 25px 0 0;
margin: 0;
font-size: 6.8rem;
line-height: 1.2;
color: rgba(0, 0, 0, 1);
text-rendering: optimizeLegibility;
-webkit-animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-top 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
display: inline-block;
}
<div class="slide-top">
<span>Person</span>
<span>is</span>
<span>a</span>
<span>designer</span>
<span>living</span>
<span>in</span>
<span>Brooklyn,</span>
<span>NY.</span>
</div>

Related

CSS multiple transform to same element during different event

I have a set of link tags that appear on page load with translate3D. This works perfectly fine. But I need the link tags to either scale on it's hover. Which doesn't work directly.
Is there a way to achieve it with just CSS?
Here is the code :
.linkblock {
margin: 20% 0;
}
.hlink {
width: 12%;
height: 60px;
opacity: 0;
padding: 0 10px;
background: rgba(0, 0, 0, 0.3);
display: inline-block;
text-align: center;
color: rgba(0, 0, 0, 0.6);
transition: all 0.5s ease;
}
.hlink:hover {
transform: translate(0px, -20px);
color: red;
background: rgba(0, 0, 0, 0.6)
}
#keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
animation: fadeInUp 0.3s ease-in both;
}
.linkblock a:nth-child(1) {
animation-delay: 1.0s;
}
.linkblock a:nth-child(2) {
animation-delay: 1.1s;
}
.linkblock a:nth-child(3) {
animation-delay: 1.2s;
}
.linkblock a:nth-child(4) {
animation-delay: 1.3s;
}
.linkblock a:nth-child(5) {
animation-delay: 1.4s;
}
.linkblock a:nth-child(6) {
animation-delay: 1.5s;
}
.linkblock a:nth-child(7) {
animation-delay: 1.6s;
}
.linkblock a:nth-child(8) {
animation-delay: 1.7s;
}
<div class="linkblock">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>

The issue is the use of both that allow you to keep the last state of your animation thus the transform inside the animation will override the one on the hover that will never get activated.
You can split your animation into 2 animation and use both or forwards with only opacity and you will be able to have your transition after the animation is done.
.linkblock {
margin: 20% 0;
}
.hlink {
width: 12%;
height: 60px;
padding: 0 10px;
background: rgba(0, 0, 0, 0.3);
display: inline-block;
text-align: center;
color: rgba(0, 0, 0, 0.6);
transition: all 0.5s ease;
opacity:0;
}
.hlink:hover {
transform: translate(0px, -20px) scale(1.2);
color: red;
background: rgba(0, 0, 0, 0.6)
}
#keyframes fadeInUp {
from {
transform: translate3d(0, 100%, 0);
}
}
#keyframes show {
to {
opacity:1;
}
}
.fadeInUp {
animation: fadeInUp 0.3s ease-in,
show 0.3s ease-in forwards;
}
.linkblock a:nth-child(1) {
animation-delay: 1.0s;
}
.linkblock a:nth-child(2) {
animation-delay: 1.1s;
}
.linkblock a:nth-child(3) {
animation-delay: 1.2s;
}
.linkblock a:nth-child(4) {
animation-delay: 1.3s;
}
.linkblock a:nth-child(5) {
animation-delay: 1.4s;
}
.linkblock a:nth-child(6) {
animation-delay: 1.5s;
}
.linkblock a:nth-child(7) {
animation-delay: 1.6s;
}
.linkblock a:nth-child(8) {
animation-delay: 1.7s;
}
<div class="linkblock">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>

Please try this:
.linkblock{
margin:20% 0;
}
.hlink{
width:12%;
height:60px;
opacity:0;
padding:0 10px;
background:rgba(0,0,0,0.3);
display:inline-block;
text-align: center;
color:rgba(0,0,0,0.6);
transition:all 0.5s ease;
transform:translate3d(0,0,0); /* add it */
}
.hlink:hover{
transform:translate3d(0,0,0) scale(1.2); /* add it */
color:red;
background:rgba(0,0,0,0.6)
}
#keyframes fadeInUp {
from{
opacity:0;
transform:translate3d(0,100%,0);
}
to{
opacity:1;
/* transform:translate3d(0,0,0); */ /* remove it */
}
}
.fadeInUp{
animation:fadeInUp 0.3s ease-in both;
}
.linkblock a:nth-child(1){animation-delay:1.0s;}
.linkblock a:nth-child(2){animation-delay:1.1s;}
.linkblock a:nth-child(3){animation-delay:1.2s;}
.linkblock a:nth-child(4){animation-delay:1.3s;}
.linkblock a:nth-child(5){animation-delay:1.4s;}
.linkblock a:nth-child(6){animation-delay:1.5s;}
.linkblock a:nth-child(7){animation-delay:1.6s;}
.linkblock a:nth-child(8){animation-delay:1.7s;}
<div class="linkblock">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>

You want to animate with the max-height property.
Set the max-height to say 50px on hover
set the max-height on the property itself to it's original height
Here is a working fiddle
Final css file:
.linkblock{
margin:20% 0;
}
.hlink{
width:12%;
height: 60px;
max-height: 60px; // add this
opacity:0;
padding:0 10px;
background:rgba(0,0,0,0.3);
display:inline-block;
text-align: center;
color:rgba(0,0,0,0.6);
transition:all 0.5s ease;
}
.hlink:hover{
max-height: 50px; // add this
color:red;
background:rgba(0,0,0,0.6)
}
#keyframes fadeInUp {
from{
opacity:0;
transform:translate3d(0,100%,0);
}
to{
opacity:1;
transform:translate3d(0,0,0);
}
}
.fadeInUp{
animation:fadeInUp 0.3s ease-in both;
}
.linkblock a:nth-child(1){animation-delay:1.0s;}
.linkblock a:nth-child(2){animation-delay:1.1s;}
.linkblock a:nth-child(3){animation-delay:1.2s;}
.linkblock a:nth-child(4){animation-delay:1.3s;}
.linkblock a:nth-child(5){animation-delay:1.4s;}
.linkblock a:nth-child(6){animation-delay:1.5s;}
.linkblock a:nth-child(7){animation-delay:1.6s;}
.linkblock a:nth-child(8){animation-delay:1.7s;}

Prevent last css animation from hiding

I have a CSS animation I found online to loop through a website headline, but at the moment, when the last headline appears, it also hides, meaning there is no headline visible at the end.
What I've spent the last hour trying to work out, is how can I have the css animation work like I do right now, except when the last headline appears, instead of sliding out and hiding, it just stays there...
Here is what I have:
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
animation-delay: 7.5s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
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 class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>

try it i thinks it help full
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
}
.rw-words-1 span:last-child {
-webkit-animation: rotateend 8s 1 forwards 6s;
-ms-animation: rotateend 8s 1 forwards 6s;
animation: rotateend 8s 1 forwards 6s;
}
#keyframes rotateend {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {opacity: 1}
}
.rw-words-1 span {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
animation-delay: 7.5s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
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 class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>
i have add some css

You can create a new animation for the last span in the container like this:
.rw-words-1 span:not(:last-child) {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:last-child {
position: absolute;
-webkit-animation: showWord 8s linear;
-ms-animation: showWord 8s linear;
animation: showWord 8s linear;
}
and the keyframe animation something like this:
#keyframes showWord {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
95% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
See a demo below - I guess you can take it forward from this point:
.rw-words {
display: inline;
}
.rw-words-1 span:not(:last-child) {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:last-child {
position: absolute;
-webkit-animation: showWord 8s linear;
-ms-animation: showWord 8s linear;
animation: showWord 8s linear;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes showWord {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
95% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<span class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>

css keyframes rotate words vertically

I want to rotate a word with css keyframes. After the second word appeard, there´s a blank and first after some seconds the first word is appearing again. The word should rotate vertical. this works. I only can´t make it work, that after the second word the first word is visible immediatly
my Code:
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #e54517;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #e54517;
}
#-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
17% { opacity: 1; -ms-transform: translateY(0px); }
20% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(90px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<div class="rw-words rw-words-1">
<span>steuern.</span>
<span>erkennen.</span>
</div>
can´t see the mistake

Replace this:
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #e54517;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #e54517;
}
by this:
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #e54517;
-webkit-animation: rotateWord 6s linear infinite 0s;
-ms-animation: rotateWord 6s linear infinite 0s;
animation: rotateWord 6s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #e54517;
}
Here is the JSFiddle demo
Your initial code waited for the whole 18 seconds to complete before restarting.

How to set my site loader in middle of screen

I use a loader of my site but it's position of top of the page how to implement in css to align center of the sereen. Please check the my loader example Demo
**
#fountainTextG{
width:360px;
margin:auto;
}
.fountainTextG{
color:rgb(242,155,97);
font-family:Arial;
font-size:38px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_fountainTextG;
-o-animation-name:bounce_fountainTextG;
-ms-animation-name:bounce_fountainTextG;
-webkit-animation-name:bounce_fountainTextG;
-moz-animation-name:bounce_fountainTextG;
animation-duration:2.09s;
-o-animation-duration:2.09s;
-ms-animation-duration:2.09s;
-webkit-animation-duration:2.09s;
-moz-animation-duration:2.09s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.5);
-o-transform:scale(.5);
-ms-transform:scale(.5);
-webkit-transform:scale(.5);
-moz-transform:scale(.5);
}#fountainTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#fountainTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#fountainTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#fountainTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#fountainTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#fountainTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#fountainTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
#fountainTextG_8{
animation-delay:1.79s;
-o-animation-delay:1.79s;
-ms-animation-delay:1.79s;
-webkit-animation-delay:1.79s;
-moz-animation-delay:1.79s;
}
#keyframes bounce_fountainTextG{
0%{
transform:scale(1);
color:rgb(252,179,116);
}
100%{
transform:scale(.5);
color:rgb(255,255,255);
}
}
#-o-keyframes bounce_fountainTextG{
0%{
-o-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-o-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-ms-keyframes bounce_fountainTextG{
0%{
-ms-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-ms-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-webkit-keyframes bounce_fountainTextG{
0%{
-webkit-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-webkit-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-moz-keyframes bounce_fountainTextG{
0%{
-moz-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-moz-transform:scale(.5);
color:rgb(255,255,255);
}
}
<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">M</div><div id="fountainTextG_2" class="fountainTextG">e</div><div id="fountainTextG_3" class="fountainTextG">n</div><div id="fountainTextG_4" class="fountainTextG">s</div><div id="fountainTextG_5" class="fountainTextG">o</div><div id="fountainTextG_6" class="fountainTextG">f</div><div id="fountainTextG_7" class="fountainTextG">t</div><div id="fountainTextG_8" class="fountainTextG">s</div></div>
**
This loader made from pure css3 java script or other library not include with this.

Define your id #fountainTextG
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -75px;
this css
#fountainTextG{
width: 360px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -75px;
}
.fountainTextG{
color:rgb(242,155,97);
font-family:Arial;
font-size:38px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_fountainTextG;
-o-animation-name:bounce_fountainTextG;
-ms-animation-name:bounce_fountainTextG;
-webkit-animation-name:bounce_fountainTextG;
-moz-animation-name:bounce_fountainTextG;
animation-duration:2.09s;
-o-animation-duration:2.09s;
-ms-animation-duration:2.09s;
-webkit-animation-duration:2.09s;
-moz-animation-duration:2.09s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.5);
-o-transform:scale(.5);
-ms-transform:scale(.5);
-webkit-transform:scale(.5);
-moz-transform:scale(.5);
}#fountainTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#fountainTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#fountainTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#fountainTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#fountainTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#fountainTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#fountainTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
#fountainTextG_8{
animation-delay:1.79s;
-o-animation-delay:1.79s;
-ms-animation-delay:1.79s;
-webkit-animation-delay:1.79s;
-moz-animation-delay:1.79s;
}
#keyframes bounce_fountainTextG{
0%{
transform:scale(1);
color:rgb(252,179,116);
}
100%{
transform:scale(.5);
color:rgb(255,255,255);
}
}
#-o-keyframes bounce_fountainTextG{
0%{
-o-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-o-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-ms-keyframes bounce_fountainTextG{
0%{
-ms-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-ms-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-webkit-keyframes bounce_fountainTextG{
0%{
-webkit-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-webkit-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-moz-keyframes bounce_fountainTextG{
0%{
-moz-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-moz-transform:scale(.5);
color:rgb(255,255,255);
}
}
<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">M</div><div id="fountainTextG_2" class="fountainTextG">e</div><div id="fountainTextG_3" class="fountainTextG">n</div><div id="fountainTextG_4" class="fountainTextG">s</div><div id="fountainTextG_5" class="fountainTextG">o</div><div id="fountainTextG_6" class="fountainTextG">f</div><div id="fountainTextG_7" class="fountainTextG">t</div><div id="fountainTextG_8" class="fountainTextG">s</div></div>

Put position: fixed and left/top to 50%. Using negative margin move element back via it's half width/height.
Also instead of flaot: left; use display: inline-block
#fountainTextG {
width: 360px;
margin: auto;
position: fixed;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -180px;
text-align: center;
}
.fountainTextG {
color: rgb(242, 155, 97);
font-family: Arial;
font-size: 38px;
text-decoration: none;
font-weight: normal;
font-style: normal;
display: inline-block;
animation-name: bounce_fountainTextG;
-o-animation-name: bounce_fountainTextG;
-ms-animation-name: bounce_fountainTextG;
-webkit-animation-name: bounce_fountainTextG;
-moz-animation-name: bounce_fountainTextG;
animation-duration: 2.09s;
-o-animation-duration: 2.09s;
-ms-animation-duration: 2.09s;
-webkit-animation-duration: 2.09s;
-moz-animation-duration: 2.09s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-direction: normal;
-o-animation-direction: normal;
-ms-animation-direction: normal;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
}
#fountainTextG_1 {
animation-delay: 0.75s;
-o-animation-delay: 0.75s;
-ms-animation-delay: 0.75s;
-webkit-animation-delay: 0.75s;
-moz-animation-delay: 0.75s;
}
#fountainTextG_2 {
animation-delay: 0.9s;
-o-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
}
#fountainTextG_3 {
animation-delay: 1.05s;
-o-animation-delay: 1.05s;
-ms-animation-delay: 1.05s;
-webkit-animation-delay: 1.05s;
-moz-animation-delay: 1.05s;
}
#fountainTextG_4 {
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
}
#fountainTextG_5 {
animation-delay: 1.35s;
-o-animation-delay: 1.35s;
-ms-animation-delay: 1.35s;
-webkit-animation-delay: 1.35s;
-moz-animation-delay: 1.35s;
}
#fountainTextG_6 {
animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
#fountainTextG_7 {
animation-delay: 1.64s;
-o-animation-delay: 1.64s;
-ms-animation-delay: 1.64s;
-webkit-animation-delay: 1.64s;
-moz-animation-delay: 1.64s;
}
#fountainTextG_8 {
animation-delay: 1.79s;
-o-animation-delay: 1.79s;
-ms-animation-delay: 1.79s;
-webkit-animation-delay: 1.79s;
-moz-animation-delay: 1.79s;
}
#keyframes bounce_fountainTextG {
0% {
transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
transform: scale(.5);
color: rgb(255, 255, 255);
}
}
#-o-keyframes bounce_fountainTextG {
0% {
-o-transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
-o-transform: scale(.5);
color: rgb(255, 255, 255);
}
}
#-ms-keyframes bounce_fountainTextG {
0% {
-ms-transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
-ms-transform: scale(.5);
color: rgb(255, 255, 255);
}
}
#-webkit-keyframes bounce_fountainTextG {
0% {
-webkit-transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
-webkit-transform: scale(.5);
color: rgb(255, 255, 255);
}
}
#-moz-keyframes bounce_fountainTextG {
0% {
-moz-transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
-moz-transform: scale(.5);
color: rgb(255, 255, 255);
}
}
<div id="fountainTextG">
<div id="fountainTextG_1" class="fountainTextG">M</div>
<div id="fountainTextG_2" class="fountainTextG">e</div>
<div id="fountainTextG_3" class="fountainTextG">n</div>
<div id="fountainTextG_4" class="fountainTextG">s</div>
<div id="fountainTextG_5" class="fountainTextG">o</div>
<div id="fountainTextG_6" class="fountainTextG">f</div>
<div id="fountainTextG_7" class="fountainTextG">t</div>
<div id="fountainTextG_8" class="fountainTextG">s</div>
</div>

Can't work out why each span overlaps during animation

Basically just trying to make an animation which switches between an 0 and an o repeatedly without them overlaping.
Any ideas?
https://jsfiddle.net/ckfoch7v/
.rw-words-1 span{
animation: rotateWordsFirst 0.3s linear 0s infinite;
left: 11px;
top: 2px;
}
.rw-words span:nth-child(2) {
animation-delay: 0.2s;
}
.rw-words span:nth-child(3) {
animation-delay: 0.4s;
}
.rw-words span:nth-child(4) {
animation-delay: 0.6s;
}
.rw-words span:nth-child(5) {
animation-delay: 0.8s;
}
.rw-words span:nth-child(6) {
animation-delay: 0.9s;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: linear; height: 0px; }
95% { opacity: 1;}
98% { opacity: 0; }
}

Try with two spans.
It will work.
HTML
<div class="alien"> <span>\ /</span>
<span>.</span>
<section class="rw-wrapper">
<div class="rw-sentence">
<div class="rw-words rw-words-1">
<span>0</span>
<span>o</span>
</div>
</div>
</section>
</div>
Demo Here