vvp logo anim

by phloe

HTML

<div><b><i></i></b></div>

CSS

body {
	background-color: #FFF;
}
div {
	margin: 400px;
	transform: translateX(-100px) scale(2);
	animation: ease-in-out forwards translation 5s;
}
b {
	display: block;
	animation: ease-in-out forwards rotation-1 5s;
	transform-origin: 100px bottom;
}

i {
	display: block;
	animation: ease-in-out forwards rotation-2 5s;
	transform-origin: 100px -100px;
}

i:after {
	content: "";
	display: block;
	width: 2px;
	height: 2px;
	background-color: #000;
	animation: ease-out forwards size 5s;
	transform-origin: 0 bottom;
}

@keyframes translation {
	0% {
		transform: none;
	}/*
	30%, 40% {
		transform: translateX(-100px);
	}
	*/70%, 100% {
		transform: translateX(-200px);
	}
}

@keyframes size {
	0%, 20% {
		transform: none;
	}
	30%, 60% {
		transform: scaleX(50);
	}
	70%, 100% {
		transform: scaleX(50) scaleY(50);
	}
}

@keyframes rotation-1 {
	0% {
		transform: none;
	}
	10%, 100% {
		transform: rotate(90deg);
	}
}

@keyframes rotation-2 {
	
	0%, 40% {
		transform: none;
	}
	50%, 100% {
		transform: rotate(90deg);
	}
}