Twitter splashscreen animation

index.html

<div class="cover">
	<img src="http://www.macdrifter.com/theme/images/twitter-snow.svg" alt="Twitter Bird" id="icon">
</div>

<img src="https://www.ghacks.net/wp-content/uploads/2019/06/How-to-disable-Twitters-new-interface.jpg" alt="" class="content">

style.css

body {
	margin: 0;
	padding: 0;
}

.cover {
	background: #1DA1F2;
	position: fixed;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: fade-out 4s /*infinite*/;
}

.cover #icon {
	--size: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: var(--size);
	
	animation: zoom-in 2s /*infinite*/;
	animation-delay: 2s;
}

@keyframes zoom-in {
	50% {
		width: var(--size);
	}
	60% {
		width: calc(var(--size) * 0.9);
	}
	100% {
		width: 250%;
	}
}
@keyframes fade-out {
	0%, 85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.content {
	width: 100%;
}

twitter-splashscreen-animation.markdown

Twitter splashscreen animation

A small twitter loading/splashscreen re-creation

A Pen by Polychroma, LLC. on CodePen.

License.