CSS - @keyframes and @layers

[Strange]

So I'm having a weird issue on my site where in my CSS style section, an element that uses @keyframes for a blink effect, causes blinking text to appear above all the other layers.
I've tried using (how I think) @layer wrapper works, but when I try to use it to wrap the @keyframes into a different layer, it borks the whole thing up and EVERYTHING gets separated.

The blink code is

Code

.blink {
	animation: blinker 3s ease-in-out infinite;
}
@keyframes blinker {
	50% {
	opacity: 0.3;
	}
}

And I'm using a few different #id's to separate stuff into layers using <div id="etc"> to make the orginal layer effect.
(Its a fake screen bezel, then a scanline layer, then writing behind that)

Spoiler

Code

	<style>
		#iconpic {
			background-image: url(Ashtray_03.gif);
			background-repeat: no-repeat;
			background-attachment: sticky;
			background-position: top 50px right 80px;
			padding: 100px;
		}
		#screen {
			
			background-repeat: no-repeat;
			background-attachment: sticky;
			background-position: top right;
		}
		#bezel {
			position: fixed;
			width:100%;
			height:100%;
			top:0;
			left: 0;
			pointer-events: none;
		}
		#scan {
			position: fixed;
			opacity: 0.7;
			width:100%;
			height:100%;
			top:0;
			left: 0;
			pointer-events: none;
		}
		#writing {
			color: #FFCC00;
			padding:50px;
			font-family:Courier New;
			font-size: 20px;
			text-shadow: 1px 1px 2px black, 0 0 1em #FFB000, 0 0 0.2em #FFB000;
		}
		#navibox {
			color: #FFCC00;
			font-family:Courier New;
			font-size: 20px;
			text-shadow: 1px 1px 2px black, 0 0 1em #FFB000, 0 0 0.2em #FFB000;
			padding-top: 00px;
			background-color: #3C393C;
			border:none;
			border-bottom: 1px double; #FFB000;
			border-left: 2px dashed; #FFB000;
		}
		.blink {
			animation: blinker 3s ease-in-out infinite;
		}
		@keyframes blinker {
			50% {
				opacity: 0.3;
			}
		}
		audio {
		padding:150px;"
		}
		body {
			background-color:#3C393C;
		}
	</style>

[close]

So right now the blinking text (and ONLY the blinking text) appears above the bezel.
You can see it hereif you resize the window to make the blinking text scroll over the bezel

[Melooon]

If the blinking over bezel is the only issue; just set a high z-inxed on the bezel (z-index: 10;) - I don't exactly know why CSS animations mess with the rendering order sometimes (if someone does know please explain) - however usually you can just do some z-index hacks to work around issues like this!