@Keyframes, 'animation-delay' attribute does not work within a 'from' or 'to'

Question

@Keyframes, 'animation-delay' attribute does not work within a 'from' or 'to'

Navigation

#1 by (1 votes)

1

I want to give a delay to this animation but I'm not getting a delay before it goes to the center of the page, in case I add 'animation-delay' inside the class .ft it already starts in the center of the page when loading it, I wanted the page load to start with a delay before it started to appear, leaving it at the same speed when 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>

html css keyframes

asked by anonymous 30.06.2018 / 23:15

1 answer

How do I display the feedback message only for the focused field? How to make a for in a tag script?

score 1 · Accepted Answer

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

I made a set and now 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>