How to do Metro UI Animations with HTML/CSS & JS

After the arrival of Windows 8 metro style design became really popular and you can see lots of ways to do Metro style design. Believe it or not the design has changed enormously for the last year and half. Metro style will be adopted more in more in different design projects such as apps & websites. That’s is because of it’s simplicity and eye-catchy and bright look. It seems that the icons will keep being simplified, flat colours will stay and be used more and more. Metro UI style aims to be more user-friendly and simple and probably that is the reason designers started to use it. In this example below you will see how to do a Metro UI animations with some HTML/CSS and Javascript.  The icons used are from Font Awesome but you can use other ones such as Glyph icons, Ionicons or Icomoon. Have a look at Glyphsearch if you want.

This animations are developed by Marius Balaj on Codepen. Have a look at the code below if you want to create such Metro UI Animations.

Metro UI Animations



<h2>Dont forget to check :active</h2>

<ul class="metro">

<li><i class="fa fa-gamepad"></i><span>Games</span></li>
<li><i class="fa fa-cogs"></i><span>Settings</span></li>
<li><i class="fa fa-envelope-o"></i><span>Email</span></li>
<li><i class="fa fa-comments-o"></i><span>Messages</span></li>
<li><i class="fa fa-music"></i><span>Music</span></li>
<li><i class="fa fa-heart-o"></i><span>Favorites</span></li>
<li><i class="fa fa-picture-o"></i><span>Photos</span></li>


<div class="box">
<span class="close"></span>



@import url(,700);
@import "";

body {
background: #363B48;
font-family: Montserrat;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

h2 {
margin:150px auto 50px;
border:1px solid rgba(173, 173, 173, 0.15);

.metro {
width: 630px;
margin: 0 auto 0;
.metro li {
-webkit-transform: perspective(600px);
-webkit-transform-style: preserve-3d;
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 50%;
-ms-transform: perspective(600px);
-ms-transform-style: preserve-3d;
-ms-transform-origin-x: 50%;
-ms-transform-origin-y: 50%;
transform: perspective(600px);
transform-style: preserve-3d;
transform-origin-x: 50%;
transform-origin-y: 50%;
cursor: default;
position: relative;
text-align: center;
margin: 0 10px 10px 0;
width: 150px;
height: 150px;
color: #ffffff;
float: left;
-webkit-transition: .2s -webkit-transform, 1s opacity;
-ms-transition: .2s -ms-transform, 1s opacity;
transition: .2s transform, 1s opacity;

.metro li i {
font-size: 54px;
margin: 35px 0 0;

.metro li span {
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
position: absolute;
left: 15px;
bottom: 15px;
font-size: 14px;

.metro li:first-child {
background: #00b6de;

.metro li:nth-child(2) {
background: #56dea7;
width: 310px;

.metro li:nth-child(3) {
background: #ff7659;
margin: 0;

.metro li:nth-child(4) {
background: #f8cd36;

.metro li:nth-child(5) {
background: #f26175;

.metro li:nth-child(6) {
background: #5ca7df;

.metro li:last-child {
background: #9e7ac2;
margin: 0;

.metro li:nth-child(5):active, .metro li:first-child:active {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);

.metro li:nth-child(7):active, .metro li:nth-child(2):active {
-webkit-transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
-ms-transform: perspective(600px) rotate3d(1, 0, 0, -10deg);
transform: perspective(600px) rotate3d(1, 0, 0, -10deg);

.metro li:nth-child(3):active {
-webkit-transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
-ms-transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
transform: perspective(600px) rotate3d(0, 1, 0, 10deg);

.metro li:nth-child(4):active {
-webkit-transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
-ms-transform: perspective(600px) rotate3d(0, 1, 0, -10deg);
transform: perspective(600px) rotate3d(0, 1, 0, -10deg);

.metro li:nth-child(6):active {
-webkit-transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
-ms-transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
transform: perspective(600px) rotate3d(1, 0, 0, 10deg);

/* POPUP */

.box {
display: table;
top: 0;
visibility: hidden;
-webkit-transform: perspective(1200px) rotateY(180deg) scale(0.1);
-ms-transform: perspective(1200px) rotateY(180deg) scale(0.1);
transform: perspective(1200px) rotateY(180deg) scale(0.1);
top: 0;
left: 0;
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: 1s all;

.box p {
display: table-cell;
vertical-align: middle;
font-size: 64px;
color: #ffffff;
text-align: center;
margin: 0;
opacity: 0;
transition: .2s;
-webkit-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;

.box p i {
font-size: 128px;
margin:0 0 20px;

.box .close {
border:3px solid rgba(255, 255, 255, 1);
transition: .2s;
-webkit-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;

.box .close:active {

.box .close::before {
content: "";
display: block;
position: absolute;
background-color: rgba(255, 255, 255, 1);
width: 80%;
height: 6%;
left: 10%;
top: 47%;

.box .close::after {
content: "";
display: block;
position: absolute;
background-color: rgba(255, 255, 255, 1);
width: 6%;
height: 80%;
left: 47%;
top: 10%;
} {
left: 0;
top: 0;
visibility: visible;
opacity: 1;
z-index: 999;
-webkit-transform: perspective(1200px) rotateY(0deg) scale(1);
-ms-transform: perspective(1200px) rotateY(0deg) scale(1);
transform: perspective(1200px) rotateY(0deg) scale(1);
width: 100%;
height: 100%;
} .close, p {
opacity: 1;


$(document).ready(function() {

var $box = $('.box');

$('.metro li').each(function(){
var color = $(this).css('backgroundColor');
var content = $(this).html();
$(this).click(function() {
$box.css('backgroundColor', color);

$('.close').click(function() {
$box.css('backgroundColor', 'transparent');



Make sure you visit Marius Balaj on Codepen and show your appreciation for his efforts.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *