Как добавить задержку в анимации в css?

Question

[MelPoks]

Как сейчас: Текст быстро меняет цвет каждую секунду
Как надо: Что бы текст был белого цвета секунды 3-4 а потом резко пропадал на 0.5 секунд и снова резко появлялся
HELP!

<p id="blink">Сделаем наш город ярче!</p>

#blink {
	-webkit-animation: blink 1s linear infinite; 
	animation: blink 1s linear infinite; 
	font-weight: bold; 
	color: color: transparent; 
    font-size:36px!important;
    text-align:center;
}

@-webkit-keyframes blink { 
	0% { color: transparent; }
	50% { color: #FFF; }
	100% { color: transparent; }
}

@keyframes blink {  
	0% { color: transparent; }
	50% { color: #FFF; }
	100% { color: transparent; } 
}

Comments

[MelPoks]

Можно как нибудь через opacity реализовать?

[Андрей Федоров]

MelPoks: можно, только зачем? color решает вашу задачу.

Answer 1

[Андрей Федоров]

animation: blink 1s linear infinite;
у вас длительность анимации 1 секунда. а вы просите 4.5 как максимум.
поправьте.
а так же измените keyframes:
0% {color: #fff}
80% {color: #fff}
81% {color: transparent}
100% {color: transparent}

Comments

[MelPoks]

Спасибо, а как сделать что бы надпись на меньшее время пропадала, как бы моргала, а то сейчас где то на 1 секунду пропадает

[MelPoks]

А все разобрался!

Answer 2

[Алексей Струков]

Длину анимации поставь 5 секунд
В кейфреймс напиши:
0% {color: #fff};
85% {color: #fff};
90% {color: transparent};
95% {color: #fff};
100% {color: #fff};