CSS animation starts after certain amount of time - html

Question

I have been trying to figure this out for some time now, no success so far though: I want to run a typing animation using CSS. The animation has to start after 7 seconds. I can't figure out how to do this tho. My code looks like this:
HTML
<div class='background-fullwidth'>
<div class="css-typing">
This text will pop up using an typewriting effect
</div>
</div>
CSS
.css-typing {
width: 360px;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 3s steps(50, end);
animation: type 3s steps(55, end);
-o-animation: type 5s steps(50, end);
-moz-animation: type 3s steps(55, end);
padding: 10px;
}
.background-fullwidth {
width: 400px;
background-color: rgba(0, 50, 92, 0.7);
}
#keyframes type {
from { width: 0; }
to { width: 360px; }
}
#-moz-keyframes type {
from { width: 0; }
to { width: 360px; }
}
#-webkit-keyframes type {
from { width: 0; }
to { width: 360px; }
}
Does anyone know how to add this timer - let's say the animation has to start after 7 seconds? From second 1 to 7 only the wraping DIV (blue background) has to be shown.
Fiddle looks like this:
CSS Animation

Answer 1

You'll have to use 3 different animation properties.
animation-delay: It helps you achieve the solution to the basic problem of starting the animation after 7 seconds.
animation-iteration-count; This property lets you decide the number of times the animation repeats itself. Setting it to 1 will limit it to a single animation instance.
animation-fill-mode: Setting this property to forward will make sure that the width remains 320 at the end of the animation.
CSS
animation-delay: 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
width: 0; // So that the animation starts from 0
Review the fiddle at https://jsfiddle.net/kaminasw/at6mbxyr/

Answer 2

By experimenting for several times i found an easy/clever way to make this possible :
You can start the animation after certain time
Element will be hidden until the start of the animation.
My Keyframe Animation (It can be any animation) :
#keyframes fadeUp{
from{
transform: translateY(100px);
opacity: 0;
}
to{
opacity: 1;
}
}
Then i used the animation like:
h1{
animation: fadeUp 1.5s ease 7s backwards; /*Waiting time of 7 seconds*/
}
Above code is similar to :
h1{
animation-name: fadeUp;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 7s; /*For X waiting time change the value to Xs*/
animation-fill-mode: backwards;
}
:-)

Answer 3

You need to use animation-delay for that like this:
.css-typing {
--other properties--
-webkit-animation-delay: 7s; /* Safari 4.0 - 8.0 */
animation-delay: 7s;
}

Answer 4

Use animation-delay property:
animation-delay: 2s;
-webkit-animation-delay: 2s;

Answer 5

there is a property animation-delay
provide this property to your class element.
check the below example animation starts after 7 seconds
http://codepen.io/anon/pen/dNqmvB