Czy da się opóźnić powtórzenie się animacji w css

pytanie zadane 22 lipca 2017 w HTML i CSS przez KoruS Obywatel (1,630 p.)

Witam. Mam pytanie. Mam animacje która się powtarza 2 razy. Po wczytaniu strony wysuwa obiekt, a podczas 2 powtórzenia chowa. I tutaj moje pytanie. Czy da się zrobić tak by przed schowaniem czyli drugim powtórzeniem aniumacji skrypt odczekał np. 5 sekund. Ponieważ wyświetla on błędy urzytkownika i chcę aby on zdążył je przeczytać, a nie ze skrypt ledwo co błąd wysunie to odrazu chowa

1 odpowiedź

odpowiedź 22 lipca 2017 przez JayJay Mądrala (6,020 p.)

Możesz spróbować animation-delay lub transition-delay (zależenie od tego jak stworzyłeś animację).

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

komentarz 22 lipca 2017 przez KoruS Obywatel (1,630 p.)

.message_ei
{
	width: 500px;
	position: fixed;
	top: 65px;
	right: -560px;

	animation-name: szerokosc;
	animation-duration: 1s;
	animation-iteration-count: 2;
	animation-direction: alternate;
	animation-fill-mode:forwards;

	-webkit-animation-name: szerokosc;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-direction: alternate;
	-webkit-animation-fill-mode:forwards;

}

@keyframes szerokosc
{
	0% {right: -560px; opacity: 0;}
	100% {right: -60px; opacity: 1;}
}

@-webkit-keyframes szerokosc
{
	0% {right: -560px; opacity: 0;}
	100% {right: -60px; opacity: 1;}
}

komentarz 22 lipca 2017 przez Eimens Maniak (69,240 p.)

Dodaj więcej klatek :D

komentarz 23 lipca 2017 przez JayJay Mądrala (6,020 p.)
edycja 23 lipca 2017 przez JayJay

Trochę sobie inaczej wyobraziłem kod tej animacji :D W tym wypadku to tak, jak napisał PATYL dodaj więcej klatek :)

Dodajesz np. 1 dodatkową klatkę przy x% z identycznymi wartościami parametrów, co przy 100%, następnie zwiększasz czas animacji do kilku sekund. W wyniku czego przez np. pierwszą sekundę wykonuje się efekt animacji np. element się pojawia, a potem przez to, że w x% i 100% masz wpisaną tą samą pozycję elementu, zostaje on na miejscu (nic się nie zmienia) i po wykonaniu animacji element się chowa.

https://css-tricks.com/css-keyframe-animation-delay-iterations/