Windows 8 logo animation

Developer
Adrien Clerbois
Size
2,232 Kb
Views
10,120
  1. Windows 8 logo animation Previews
  2. Windows 8 logo animation HTML Codes
  3. Windows 8 logo animation CSS Codes

How do I make an windows 8 logo animation?

Forked from Mladen Stanojevic's Pen Windows 8 logo animation.. What is a windows 8 logo animation? How do you make a windows 8 logo animation? This script and codes were developed by Adrien Clerbois on 30 December 2022, Friday.

Windows 8 logo animation Previews
IQ Test

Windows 8 logo animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Windows 8 logo animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapp"> <div class="text"> <h1>Trasys</h1> </div> <div class="logo"> <span class="top-left"></span> <span class="bottom-right"></span> </div>
</div>
</body>
</html>

Windows 8 logo animation - Script Codes CSS Codes

body{	margin: 0;	padding: 0;	background-color: #90da15;
}
.wrapp{	position: absolute;	top: 50%;	left: 50%;	width: 600px;	height: 300px;	margin: -150px 0 0 -300px;	-webkit-perspective: 30px;	-webkit-transform: translateX(0px);	-webkit-animation: wrapp 400ms 800ms ease-in forwards;	-moz-perspective: 30px;	-moz-transform: translateX(0px);	-moz-animation: wrapp 400ms 800ms ease-in forwards;	-ms-perspective: 30px;	-ms-transform: translateX(0px);	-ms-animation: wrapp 400ms 800ms ease-in forwards;	perspective: 30px;	transform: translateX(0px);	animation: wrapp 400ms 800ms ease-in forwards;
}
.text{	position: absolute;	top: 50%;	left: 50%;	width: 0px;	height: 60px;	margin: -30px 0 0 -160px;	overflow: hidden;	-webkit-transform: translateX(0px);	-webkit-animation: text 400ms 800ms linear forwards;	-moz-transform: translateX(0px);	-moz-animation: text 400ms 800ms linear forwards;	-ms-transform: translateX(0px);	-ms-animation: text 400ms 800ms linear forwards;	transform: translateX(0px);	animation: text 400ms 800ms linear forwards;
}
h1{	float: right;	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;	font-weight: normal;	color: #fff;	padding: 0;	margin: 0;	width: 320px;	height: 60px;	font-size: 60px;	line-height: 60px;
}
.logo{	position: absolute;	top: 50%;	left: 50%;	width: 90px;	height: 90px;	margin: -45px 0 0 -45px;	background-color: #fff;	-webkit-transform: translateX(0px) rotateY(10deg);	-webkit-animation: logo 500ms 300ms ease-out forwards;	-moz-transform: translateX(0px) rotateY(10deg);	-moz-animation: logo 500ms 300ms ease-out forwards;	-ms-transform: translateX(0px) rotateY(10deg);	-ms-animation: logo 500ms 300ms ease-out forwards;	transform: translateX(0px) rotateY(10deg);	animation: logo 500ms 300ms ease-out forwards;
}
.logo .top-left{	position: absolute;	top: 0;	left: 0;	width: 44px;	height: 44px;	border-right: solid 2px #90da15;	border-bottom: solid 2px #90da15;
}
.logo .bottom-right{	position: absolute;	bottom: 0;	right: 0;	width: 44px;	height: 44px;	border-left: solid 2px #90da15;	border-top: solid 2px #90da15;
}
@-webkit-keyframes logo { from {	-webkit-transform: translateX(0px) rotateY(10deg); } to {	-webkit-transform: translateX(0px) rotateY(-10deg); }
}
@-webkit-keyframes text { from {	width: 0px;	-webkit-transform: translateX(0px); } 60%{	width: 0px; } to {	width: 320px;	-webkit-transform: translateX(240px); }
}
@-webkit-keyframes wrapp { from {	-webkit-transform: translateX(0px); } to {	-webkit-transform: translateX(-200px); }
}
@-moz-keyframes logo { from {	-moz-transform: translateX(0px) rotateY(10deg); } to {	-moz-transform: translateX(0px) rotateY(-10deg); }
}
@-moz-keyframes text { from {	width: 0px;	-moz-transform: translateX(0px); } 60%{	width: 0px; } to {	width: 320px;	-moz-transform: translateX(240px); }
}
@-moz-keyframes wrapp { from {	-moz-transform: translateX(0px); } to {	-moz-transform: translateX(-200px); }
}
@-ms-keyframes logo { from {	-ms-transform: translateX(0px) rotateY(10deg); } to {	-ms-transform: translateX(0px) rotateY(-10deg); }
}
@-ms-keyframes text { from {	width: 0px;	-ms-transform: translateX(0px); } 60%{	width: 0px; } to {	width: 320px;	-ms-transform: translateX(240px); }
}
@-ms-keyframes wrapp { from {	-ms-transform: translateX(0px); } to {	-ms-transform: translateX(-200px); }
}
@keyframes logo { from {	transform: translateX(0px) rotateY(10deg); } to {	transform: translateX(0px) rotateY(-10deg); }
}
@keyframes text { from {	width: 0px;	transform: translateX(0px); } 60%{	width: 0px; } to {	width: 320px;	transform: translateX(240px); }
}
@keyframes wrapp { from {	transform: translateX(0px); } to {	transform: translateX(-200px); }
}
Windows 8 logo animation - Script Codes
Windows 8 logo animation - Script Codes
Home Page Home
Developer Adrien Clerbois
Username AClerbois
Uploaded December 30, 2022
Rating 3
Size 2,232 Kb
Views 10,120
Do you need developer help for Windows 8 logo animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adrien Clerbois (AClerbois) Script Codes
Name
A Pen by Adrien Clerbois
MyShopi Logo animation
Shine Effect
Orgagodeon
Meters
Viewer and markers selectors v2
Viewer and markers selection from jQuery UI
Viewer
Audi Ring animation CSS
Viewer and markers selectors v2 DEMO
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!