Keyframe animation not working in Safari?

HTML & CSS
9

thanks seemed to do the trick for some reason. However, mine only works if I put opacity: 0; and transform: scale(1.5) in the .large style.

Like this:

svg#one .large {
	transform: scale(1.5);
	opacity: 0;
	animation: large 5s infinite;
}

@keyframes large {
 0% {opacity: 0; transform: scale(1.5);}
 1%{transform: scale(0);}
 25% {opacity:1;}
 50% {opacity: 0; transform: scale(1.5);}
 99% {transform: scale(0)}
 100%{transform: scale(1.5);
 }
}

And some other weird stuff is that its only sometimes in the “rotation” that the element actually gets the full 1.5 scaling. It is an infinite animation and at 25-50% it should scale to 1.5 and fade out, but sometimes the element is smaller than on the next rotation etc. In short: the animation doesnt seem consistent.

And another thing, if i remove the 99% or change it to scale(1.5) the animation doesnt work.

I have none of these problems in firefox or chrome.