Почему слетают стили при добавлении анимации в класс?

Question

[avdoshka]

Всем доброго времени суток почему при добавлении анимации слетают стили на сайте. Разрабатываю проект в OpenServer при добавлении анимации к классу слетают стили на сайте. Что делать даже не знаю помогите пожалуйста разобраться. Ссылка на код тут при добавлении анимации летят стили на сайте а именно этого куска кода

}
.circle:nth-child(2): before
{
	animation-delay: -2.5s;

}
@keyframes animate 
{
	0%
{
box-shadow: 0 0 5px #0f0,
inset  0 0 5px #0f0;
filter: hue-rotate(0deg);
}
 20%
{
box-shadow: 0 0 5px #0f0,
inset  0 0 5px #0f0;

}
40%
{
box-shadow: 0 0 5px #0f0,
inset  0 0 5px #0f0;

}
60%
{
box-shadow: 0 0 5px #0f0,
inset  0 0 5px #0f0;

}
80%
{
box-shadow: 0 0 5px #0f0,
inset  0 0 5px #0f0;

}
100%
{
box-shadow: 0 0 5px #0f0,
inset  0 0 5px #0f0;
filter: hue-rotate(360deg);
}
svg{
	width: 0;
	height: 0;
}

Comments

[Ankhena]

Не закрыта } анимации.
А у псевдоэлементов нет пробелов, надо так .circle:nth-child(2)::before, а не как у вас.
Нормальные редакторы это подсвечивают.

[avdoshka]

Ankhena, Спасибо это помогло

[avdoshka]

А почему при добавлении SVG тега в HTML появляется отступы на сайте

<svg>
		<filter id="wavy">
			<feTurbulence x="0" y="0" baseFrequency="0.009" numOctaves="5" seed="2">
				<animate attributeName="baseFrequency" dur="60s" values="0.02;0.005;0.02" repeatCount="indefinite">
			</feTurbulence>
			<feDisplacementMap in="SourceGraphic" scale="30">
		</filter>
	</svg>

[Максим]

avdoshka, потому что SVG имеет размер - укажите width="0" height="0" для SVG