How can I slow down the time between animations? - css

Question

I'm trying to slow down the time between animations in my cycle.
I've tried increasing the animation time for my keyframes, but that didn't work.
span {
animation: rotateWordsFirst 15s linear infinite 0s;
&:nth-child(2) {
animation-delay: 5s;
}
&:nth-child(3) {
animation-delay: 10s;
}
&:nth-child(4) {
animation-delay: 15s;
}
}
#keyframes rotateWordsFirst {
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; }
}
I was hoping to keep the text visible for a longer period of time between animations, but everything I've tried seems to throw off my animation cycle.
I've been using this tutorial:
http://www.css3transition.com/rotating-words-css-animations/

Answer 1

I stumbled upon a similar problem when making a semi complex city animation with cars, planes and trains moving all at the same time.
I then came across this article from Chris Coyier:
https://css-tricks.com/css-keyframe-animation-delay-iterations/
here is an animation-delay property, but that won't help us here. That delays the start of the animation, but after it's started it runs continuously.
So, what he suggests, similar to what ChrisW was trying to explain, is to include the delays into your keyframe logic:
EXAMPLE
My original animation lasts 4 seconds, I want it to run infinitely but with a delay of 1s at end. This means I have to add the delay to the total animation time, in this case, 4s + 1s = 5s. Apply the following changes:
.your-element {
animation: name-of-your-animation 5s infinite;
}
Now, for the keyframes, let us assume we had something like this:
#keyframes name-of-your-animation {
0% {
//do something
}
25% {
// do something
}
50% {
//do something
}
75% {
//do something
}
100% {
// do something
}
}
We need to factor in the 1s delay at the end, so our animation must take place in 4s out of 5s, in other words, 4/5th's of the animation or 80% of the 100%:
#keyframes name-of-your-animation {
0% {
//do something
}
50% {
// do something
opacity:0.5;
}
/* Finish changes by here, as an example, let's think of moving opacity from 0 to 1, gradually or not */
79% {
opacity:1;
}
/* Between 80% and 100%, nothing changes, so the 'end state' is repeated */
80%, 100% {
// do something
opacity:1;
}
}
Give it a try and let us know if you need additional help.
Cheers
G