Entrance Chat Gallery Guilds Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
March 26, 2026 - @3.21 (what is this?)
Activity rating: Three Stars Posts & Arts: 46/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :wizard: You can make anything on the web! :wizard: Guild Events: There are no events!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  CSS - @keyframes and @layers


« previous next »
Pages: [1] Print
Author Topic: CSS - @keyframes and @layers  (Read 14 times)
Strange
Casual Poster ⚓︎
*
View Profile WWW


Another voice reeled in the net
⛺︎ My Room

Guild Memberships:
Artifacts:
Joined 2026!
« on: March 25, 2026 @961.40 »

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
Logged
Melooon
Hero Member ⚓︎
*****
View Profile WWWArt


So many stars!
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games
RSS: RSS

Guild Memberships:
Artifacts:
Flinstone Vitaminold-timey tunes~♪Always working hard!PoochKnown Apple shillcoolest melon on the web!
« Reply #1 on: March 25, 2026 @964.54 »

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!
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered

Artifact Swap: Air MailPhoenix DownRoachLasagna
Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi