@Keyframes, attribute 'Animation-delay' does not work inside a 'from' or 'to'

Question

I intend to give a 'delay' to this animation but I’m not getting a delay before it goes to the center of the page, if I add 'Animation-delay' within the class. ft it already starts in the center of the page by loading it, wanted when loading the page it start with a delay before it starts to be displayed, leaving it at the same speed while walking to the center, ??

*{ padding:0px; margin:0px;}
body{background-color:#6C9;}

p.ft{ position: absolute; 
top:100px; 
left:300px; 
transition:all 0.5s linear;
font-size:40px;
color:#FFF;
overflow:hidden;
white-space:nowrap;
}

.ft{ animation-timing-function:10s ease-in; 
animation-name:obj; 
animation-duration:3s;
}
                                    /*não funciona*/
@keyframes obj{ from{ left:-500px; animation-delay:5s;}
to{ left:300px;}
	}

<p class="ft">ANIMAÇÃO MOVE</p>

Answer 1

His animation had some problems, first that in the P tag had an unnecessary transition, after the parameters of "Animation" were half wrong. And your text had a left:300 before the animation started so she already started in the middle when you moved the delay

I adjusted and Gora the text takes 3s before entering the page and stop. I left some comments in the code.

*{ padding:0px; margin:0px;}
body{background-color:#6C9;}

p.ft{ position: absolute; 
top:100px; 

left:-500px; /*começa com o left negativo já*/
font-size:40px;
color:#FFF;
overflow:hidden;
white-space:nowrap;
}

.ft{ 

animation-name:obj; 
animation-duration:3s;  /*3s de duração*/
animation-delay:3s;  /*3s para começar*/
animation-fill-mode: forwards;  /*só roda 1x e para a animação*/
}
                                   
@keyframes obj{ 
from{ left:-500px;}
to{ left:300px;}
	}

<p class="ft">ANIMAÇÃO MOVE</p>