Revamped the App tiles' hover animation to make use of the transform property, which allows the browsers to optimize performances.

Ref: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

portal/assets/css/ynh-style.css

@@ -271,21 +271,55 @@ textarea {
   width: 2.7em;
   height: 2.7em;
   position: relative;
-  top: 0;
-  left: 0;
   padding: .2em;
   background: #666;
   font-size: 4em;
   color: #fff;
-  -webkit-transition: all .3s ease;
+  -webkit-transition: transform .3s ease;
-          transition: all .3s ease;
+          transition: transform .3s ease;
+}
+
+.listing-apps a:after,
+.listing-apps a:before {
+  content: "";
+  position: absolute;
+  -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+  -webkit-transition: inherit;
+          transition: inherit;
+}
+
+.listing-apps a:before {
+  width: 100%;
+  height: 0;
+  left: 0;
+  top: 100%;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
+  -webkit-transform: skew(45deg, 0deg);
+          transform: skew(45deg, 0deg);
+  -webkit-transition-property: height;
+          transition-property: height;
+}
+
+.listing-apps a:after {
+  width: 0;
+  height: 100%;
+  left: 100%;
+  top: 0;
+  box-shadow: 5px 0 10px rgba(0, 0, 0, .4);
+  -webkit-transform: skew(0deg, 45deg);
+  transform: skew(0deg, 45deg);
+  -webkit-transition-property: width;
+          transition-property: width;
 }
 
 .listing-apps a:hover,
 .listing-apps a:focus {
-  left: -10px;
+  outline: none;
-  top: -10px;
+  -webkit-transform: translate(-10px, -10px);
-  box-shadow: none;
+          transform: translate(-10px, -10px);
+  -webkit-transition-timing-function: cubic-bezier(0.18, 0.89, 0.52, 1.32);
+          transition-timing-function: cubic-bezier(0.18, 0.89, 0.52, 1.32); /* linear in, Out back */
 }
 
 .listing-apps a:hover:before,
@@ -305,32 +339,16 @@ textarea {
   background: #333;
 }
 
-.listing-apps a:after,
+.listing-apps a:active {
-.listing-apps a:before {
+  -webkit-transform: translate(-8px, -8px);
-  content: "";
+          transform: translate(-8px, -8px);
-  position: absolute;
-  -webkit-transition: all .3s ease;
-          transition: all .3s ease;
 }
 
-.listing-apps a:before {
+.listing-apps a:active:before {
-  width: 100%;
+  height: 8px;
-  height: 0;
-  left: 5px;
-  top: 100%;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
-  -webkit-transform: skew(45deg, 0deg);
-          transform: skew(45deg, 0deg);
 }
-
+.listing-apps a:active:after {
-.listing-apps a:after {
+  width: 8px;
-  width: 0;
-  height: 100%;
-  left: 100%;
-  top: 5px;
-  box-shadow: 5px 0 10px rgba(0, 0, 0, .4);
-  -webkit-transform: skew(0deg, 45deg);
-          transform: skew(0deg, 45deg);
 }
 
 .listing-apps span {
@@ -931,10 +949,8 @@ input.btn {
   background: #3498DB !important;
 }
 
-.bluebg:hover:after,
+.bluebg:after,
-.bluebg:focus:after,
+.bluebg:before {
-.bluebg:hover:before,
-.bluebg:focus:before {
   background: #16527A !important;
 }
 
@@ -942,10 +958,8 @@ input.btn {
   background: #9B59B6 !important;
 }
 
-.purplebg:hover:after,
+.purplebg:after,
-.purplebg:focus:after,
+.purplebg:before {
-.purplebg:hover:before,
-.purplebg:focus:before {
   background: #532C64 !important;
 }
 
@@ -953,10 +967,8 @@ input.btn {
   background: #E74C3C !important;
 }
 
-.redbg:hover:after,
+.redbg:after,
-.redbg:focus:after,
+.redbg:before {
-.redbg:hover:before,
-.redbg:focus:before {
   background: #921E12 !important;
 }
 
@@ -964,10 +976,8 @@ input.btn {
   background: #F39C12 !important;
 }
 
-.orangebg:hover:after,
+.orangebg:after,
-.orangebg:focus:after,
+.orangebg:before {
-.orangebg:hover:before,
-.orangebg:focus:before {
   background: #7F5006 !important;
 }
 
@@ -975,10 +985,8 @@ input.btn {
   background: #2ECC71 !important;
 }
 
-.greenbg:hover:after,
+.greenbg:after,
-.greenbg:focus:after,
+.greenbg:before {
-.greenbg:hover:before,
-.greenbg:focus:before {
   background: #176437 !important;
 }
 
@@ -986,10 +994,8 @@ input.btn {
   background: #34495E !important;
 }
 
-.darkbluebg:hover:after,
+.darkbluebg:after,
-.darkbluebg:focus:after,
+.darkbluebg:before {
-.darkbluebg:hover:before,
-.darkbluebg:focus:before {
   background: #07090C !important;
 }
 
@@ -997,10 +1003,8 @@ input.btn {
   background: #6A93D4 !important;
 }
 
-.lightbluebg:hover:after,
+.lightbluebg:after,
-.lightbluebg:focus:after,
+.lightbluebg:before {
-.lightbluebg:hover:before,
-.lightbluebg:focus:before {
   background: #2B5394 !important;
 }
 
@@ -1008,10 +1012,8 @@ input.btn {
   background: #F1C40F !important;
 }
 
-.yellowbg:hover:after,
+.yellowbg:after,
-.yellowbg:focus:after,
+.yellowbg:before {
-.yellowbg:hover:before,
-.yellowbg:focus:before {
   background: #796307 !important;
 }
 
@@ -1019,10 +1021,8 @@ input.btn {
   background: #F76F87 !important;
 }
 
-.lightpinkbg:hover:after,
+.lightpinkbg:after,
-.lightpinkbg:focus:after,
+.lightpinkbg:before {
-.lightpinkbg:hover:before,
-.lightpinkbg:focus:before {
   background: #DA0C31 !important;
 }
 
@@ -1031,10 +1031,8 @@ input.btn {
   background: #D66D92 !important;
 }
 
-.pinkbg:hover:after,
+.pinkbg:after,
-.pinkbg:focus:after,
+.pinkbg:before {
-.pinkbg:hover:before,
-.pinkbg:focus:before {
   background: #992B52 !important;
 }
 
@@ -1042,10 +1040,8 @@ input.btn {
   background: #1ABC9C !important;
 }
 
-.turquoisebg:hover:after,
+.turquoisebg:after,
-.turquoisebg:focus:after,
+.turquoisebg:before {
-.turquoisebg:hover:before,
-.turquoisebg:focus:before {
   background: #0B4C3F !important;
 }
 
@@ -1053,10 +1049,8 @@ input.btn {
   background: #FFC973 !important;
 }
 
-.lightyellow:hover:after,
+.lightyellow:after,
-.lightyellow:focus:after,
+.lightyellow:before {
-.lightyellow:hover:before,
-.lightyellow:focus:before {
   background: #F39500 !important;
 }
 
@@ -1064,10 +1058,8 @@ input.btn {
   background: #B5F36D !important;
 }
 
-.lightgreen:hover:after,
+.lightgreen:after,
-.lightgreen:focus:after,
+.lightgreen:before {
-.lightgreen:hover:before,
-.lightgreen:focus:before {
   background: #77CF11 !important;
 }
 
@@ -1075,10 +1067,8 @@ input.btn {
   background: #8E44AD !important;
 }
 
-.purpledarkbg:hover:after,
+.purpledarkbg:after,
-.purpledarkbg:focus:after,
+.purpledarkbg:before {
-.purpledarkbg:hover:before,
-.purpledarkbg:focus:before {
   background: #432051 !important;
 }