🖥 CSS Snippet: Intro Animations

If you want to have a cool gif or something as your intro animation, here's some codes for you! Honestly, a lot of these work best with a gif with a pattern on it, like static or other things that are chaotic. Replace the URL with the image or gif of your choice (video won't work) and make sure you use single quotes to surround your GIF URL. Don't use the split ones if you have a gif or image that would look weird kind of split (like if there are people in it) (unless you like how it looks). You also can't combine these; you've gotta pick one.

If you are more advanced, you can adjust the code for timing by adjusting the "3s" in the animation: line and adjust the percentages in the @keyframes lines.

One Gif, Full Screen, Fade Out

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://media.giphy.com/media/LmWnCBTOGUmw8/source.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

One Gif, Full Screen, Slide Up

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url('https://media.giphy.com/media/LmWnCBTOGUmw8/source.gif');
	z-index: 100;
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: slideUp 3s ease 0s 1 normal forwards;
	pointer-events: none;
}

@keyframes slideUp { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(0,-100vh); } } 
One Gif, Full Screen, Slide Down

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url('https://media.giphy.com/media/LmWnCBTOGUmw8/source.gif');
	z-index: 100;
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: slideDown 3s ease 0s 1 normal forwards;
	pointer-events: none;
}

@keyframes slideDown { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(0,100vh); } }
Pod Bay Doors: One (or two) GIFs, Split Horizontally From Center

body:before {
	content: " ";
	height: 50vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url('https://media.giphy.com/media/LmWnCBTOGUmw8/source.gif');
	z-index: 100;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	animation: doorUp 3s ease 0s 1 normal forwards;
	pointer-events: none;
}

body:after {
	content: " ";
	height: 50vh;
	width: 100vw;
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	background-image: url('https://media.giphy.com/media/LmWnCBTOGUmw8/source.gif');
	z-index: 100;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
	animation: doorDown 3s ease 0s 1 normal forwards;
	pointer-events: none;
}

@keyframes doorUp { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(0,-50vh); } } 
@keyframes doorDown { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(0,50vh); } } 
Price Is Right Doors: One (or two) GIFs, Split Vertically From Center

body:before {
	content: " ";
	height: 100vh;
	width: 50vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url('https://media.giphy.com/media/3oz8xF2tbONaIIy92M/giphy.gif');
	z-index: 100;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;
	animation: doorLeft 3s ease 0s 1 normal forwards;
	pointer-events: none;
}

body:after {
	content: " ";
	height: 100vh;
	width: 50vw;
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	background-image: url('https://media.giphy.com/media/3oz8xF2tbONaIIy92M/giphy.gif');
	z-index: 100;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom right;
	animation: doorRight 3s ease 0s 1 normal forwards;
	pointer-events: none;
}

@keyframes doorLeft { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(-50vw,0); } } 
@keyframes doorRight { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(50vw,0); } } 



Remember: always put any CSS in between two Style tags: <style></style> That way, browsers will recognize that what you're trying to do is adjust the style. Also remember that CSS stands for Cascading Style Sheets, so the browser will activate styles from top to bottom!

51 Kudos

Comments

Displaying 16 of 16 comments ( View all | Add Comment )

xxOwenjustdied!xx	1679769994 how do i change the length of the intro..? i have a semi long clip but i cant figure it out..do i just change the "3s" or something else? Report Comment
ATHEN	1672265700 for some rsn this isnt working :( im using the old computer layout u made, maybe thats the issue?? not sure but ive tried multiple gifs :( Report Comment
mak :>	1658818752 i got mine to work but it wont end? i have the style tags and everything?? i cant see anything but the gif?? Report Comment
goffik.queen	1652019661 youre a legend for this one thank you Report Comment
chandler	1648350603 if i wanted this ass a header (like above the starter of my profile but below the bar with home and browse etc.) where would i put it? could i inspect and put in a section in it? or is there another way? Report Comment
Athena	1637426911 Is there anyway to size this differently for different screen views? For example, would I copy and paste this with different width/height after @media? Report Comment Try searching auto adjust width css. This helped me with Youtube video iframe. It will make the video frame mobile friendly. Hopefully this helps! /Copy the code inside the brackets or change the (iframe) tag to body./ iframe { max-width: 100% ; width: 560px; /Adjust to your liking / height: 315px; /* Adjust to your liking/ } by TY$M*; 1639360398; Report
⚰️Hannah🔪	1617149040 Where does this go? I’m confused on the placement Report Comment Remember: always put any CSS in between two Style tags: All code can go in any of your profile boxes. I use the Heroes box. by Cory ; 1617157549; Report I can’t get mine to work for some reason. Maybe I have the wrong url for the giphy copied I’m just not sure by ⚰️Hannah🔪; 1617178145; Report chances are you do. when you find a giphy link, choose the "Media" option then choose the "Social" link. If you're doing this on a phone, tell your phone to load the desktop version of the site. by Cory ; 1617197189; Report And what is a css and where do I find it by ⚰️Hannah🔪; 1617207114; Report Omg I got it! You’re a lifesaver!!! by ⚰️Hannah🔪; 1617209368; Report
UnKnown	1616052681 Hey! Is there any way to make it zoom in and start fading after a second Report Comment
BrandonBurnsRed	1613963250 My dude, thank you so much for this!!!! Report Comment
Kathleen	1613837052 question, what happens if you increase/decrease the percentages? Report Comment changing the percentages will change the animation. Right now, the animation starts at 75% of the set time, but you can change that around to adjust how the animation plays out. by Cory ; 1613844064; Report Okay, thanks! by Kathleen; 1613845410; Report
🖤Teyga🖤	1610996662 this is so cool!!! thank you!! Report Comment
alyssa ciervo	1610827948 so style goes in begining and end? Report Comment Yes! Put <style> before the code you want and </style> after. by Cory ; 1610828165; Report
𝖘𝖚𝖇𝖋𝖚𝖘𝖊.	1610773075 omg you're f'ing awesome for this. well, even more awesome than usual. :P Report Comment
.•thetwylightzone•.	1610689213 Love yew Cor💕💕💕💕💕💕💕💕 Report Comment
ash lynx	1610551973 THANK YOU FOR THIS!!! Report Comment
ꜱʜᴇʟʙᴢ	1610473607 this is awesome, thanks for writing these up! Report Comment