From a7fe2690b04a5e381448423a9a5a75e4c37a9c07 Mon Sep 17 00:00:00 2001
From: FezVrasta <fez@tekhy.net>
Date: Sun, 7 Sep 2014 19:54:36 +0200
Subject: [PATCH] some tweaks to animations

---
 css-compiled/material.css | 115 ++++++++++++++++++++++++--------------
 less/checkboxes.less      |   4 +-
 less/inputs.less          |  24 ++++++++
 3 files changed, 98 insertions(+), 45 deletions(-)

diff --git a/css-compiled/material.css b/css-compiled/material.css
index 90f58c9a..9455cb3d 100644
--- a/css-compiled/material.css
+++ b/css-compiled/material.css
@@ -682,40 +682,6 @@ h6,
     border-top-color: #5a5a5a;
   }
 }
-.keyframe-check 100% {
-  top: -3px;
-  left: 17px;
-  width: 10px;
-  height: 21px;
-  transform: rotate(45deg);
-  border-color: #0f9d58;
-  border-left-color: transparent;
-  border-top-color: transparent;
-}
-.keyframe-check 51% {
-  border-left: transparent;
-  border-top-color: transparent;
-}
-.keyframe-check 50% {
-  top: 14px;
-  left: 17px;
-  width: 4px;
-  height: 4px;
-  transform: rotate(45deg);
-  border-color: #5a5a5a;
-  border-left-color: #5a5a5a;
-  border-top-color: #5a5a5a;
-}
-.keyframe-check 0% {
-  top: 1px;
-  left: 12px;
-  width: 18px;
-  height: 18px;
-  transform: rotate(0deg);
-  border-color: #5a5a5a;
-  border-left-color: #5a5a5a;
-  border-top-color: #5a5a5a;
-}
 @-webkit-keyframes check {
   100% {
     top: -3px;
@@ -896,15 +862,6 @@ h6,
     border-top-color: #5a5a5a;
   }
 }
-.ripple 0% {
-  opacity: 0;
-}
-.ripple 50% {
-  opacity: 0.2;
-}
-.ripple 100% {
-  opacity: 0;
-}
 @-webkit-keyframes rippleOn {
   0% {
     opacity: 0;
@@ -1298,6 +1255,7 @@ h6,
   left: 0;
   pointer-events: none;
   opacity: 0.9;
+  transform-origin: left;
 }
 .form-control-wrapper .input-lg ~ .material-input:after {
   height: 26px;
@@ -1313,6 +1271,7 @@ h6,
   animation: input-highlight 0.3s ease;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
+  opacity: 0;
 }
 .form-control-wrapper select ~ .material-input:before {
   bottom: 1px;
@@ -1656,6 +1615,76 @@ select.form-control:focus {
   box-shadow: none;
   border-color: #757575;
 }
+@-webkit-keyframes input-highlight {
+  0% {
+    left: 20%;
+    transform: scaleX(20%);
+  }
+  99% {
+    transform: scaleX(0);
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-moz-keyframes input-highlight {
+  0% {
+    left: 20%;
+    transform: scaleX(20%);
+  }
+  99% {
+    transform: scaleX(0);
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-ms-keyframes input-highlight {
+  0% {
+    left: 20%;
+    transform: scaleX(20%);
+  }
+  99% {
+    transform: scaleX(0);
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-o-keyframes input-highlight {
+  0% {
+    left: 20%;
+    transform: scaleX(20%);
+  }
+  99% {
+    transform: scaleX(0);
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes input-highlight {
+  0% {
+    left: 20%;
+    transform: scaleX(20%);
+  }
+  99% {
+    transform: scaleX(0);
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 legend {
   border-bottom: 0;
 }
diff --git a/less/checkboxes.less b/less/checkboxes.less
index 2290249b..da4335a5 100644
--- a/less/checkboxes.less
+++ b/less/checkboxes.less
@@ -112,7 +112,7 @@
     }
 }
 
-.keyframe-check {
+.keyframe-check() {
     100% {
         top: -3px;
         left: 17px;
@@ -154,7 +154,7 @@
 @-o-keyframes check {.keyframe-check()}
 @keyframes check {.keyframe-check()}
 
-.ripple{
+.ripple() {
     0% {
         opacity: 0;
     }
diff --git a/less/inputs.less b/less/inputs.less
index 9b00778f..3360da59 100644
--- a/less/inputs.less
+++ b/less/inputs.less
@@ -80,6 +80,7 @@
         left: 0;
         pointer-events: none;
         opacity: 0.9;
+        transform-origin: left;
     }
     .input-lg ~ .material-input:after {
         height: 26px;
@@ -95,6 +96,7 @@
         animation: input-highlight 0.3s ease;
         -webkit-animation-fill-mode: forwards;
         animation-fill-mode: forwards;
+        opacity: 0;
     }
 
     select ~ .material-input:before {
@@ -173,3 +175,25 @@ select.form-control {
         border-color: #757575;
     }
 }
+
+
+.keyframe-input-highlight() {
+    0% {
+        left: 20%;
+        transform: scaleX(20%);
+    }
+    99% {
+        transform: scaleX(0);
+        left: 0;
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes input-highlight {.keyframe-input-highlight()}
+@-moz-keyframes input-highlight {.keyframe-input-highlight()}
+@-ms-keyframes input-highlight {.keyframe-input-highlight()}
+@-o-keyframes input-highlight {.keyframe-input-highlight()}
+@keyframes input-highlight {.keyframe-input-highlight()}