tweaking animations

beMySun · Aug 12, 2015 · 7e1fded · 7e1fded
1 parent eaaa593
commit 7e1fded
Showing 1 changed file with 20 additions and 20 deletions.
diff --git a/less/base/animation.less b/less/base/animation.less
@@ -80,21 +80,21 @@
 // --------------------
 
 @-webkit-keyframes popoutEnter {
-	from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); }
+	from { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); }
 	to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
 }
 @keyframes popoutEnter {
-	from { opacity: 0; transform: translate3d(0, 10%, 0); }
+	from { opacity: 0; transform: translate3d(0, 10px, 0); }
 	to   { opacity: 1; transform: translate3d(0, 0, 0); }
 }
 
 @-webkit-keyframes popoutLeave {
 	from { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
-	to   { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); }
+	to   { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); }
 }
 @keyframes popoutLeave {
 	from { opacity: 1; transform: translate3d(0, 0, 0); }
-	to   { opacity: 0; transform: translate3d(0, 10%, 0); }
+	to   { opacity: 0; transform: translate3d(0, 20px, 0); }
 }
 
 
@@ -158,42 +158,42 @@
 // slide in
 
 @-webkit-keyframes slideInFromLeft {
-	from { -webkit-transform: translate3d(-100%, 0, 0); }
-	to   { -webkit-transform: none; }
+	from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); }
+	to   { opacity: 1; -webkit-transform: none; }
 }
 @keyframes slideInFromLeft {
-	from { transform: translate3d(-100%, 0, 0); }
-	to   { transform: none; }
+	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
+	to   { opacity: 1; transform: none; }
 }
 
 @-webkit-keyframes slideInFromRight {
-	from { -webkit-transform: translate3d(100%, 0, 0); }
-	to   { -webkit-transform: none; }
+	from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); }
+	to   { opacity: 1; -webkit-transform: none; }
 }
 @keyframes slideInFromRight {
-	from { transform: translate3d(100%, 0, 0); }
-	to   { transform: none; }
+	from { opacity: 0; transform: translate3d(100%, 0, 0); }
+	to   { opacity: 1; transform: none; }
 }
 
 
 // slide out
 
 @-webkit-keyframes slideOutToLeft {
-	from { -webkit-transform: none; }
-	to   { -webkit-transform: translate3d(-100%, 0, 0); }
+	from { opacity: 1; -webkit-transform: none; }
+	to   { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); }
 }
 @keyframes slideOutToLeft {
-	from { transform: none; }
-	to   { transform: translate3d(-100%, 0, 0); }
+	from { opacity: 1; transform: none; }
+	to   { opacity: 0; transform: translate3d(-100%, 0, 0); }
 }
 
 @-webkit-keyframes slideOutToRight {
-	from { -webkit-transform: none; }
-	to   { -webkit-transform: translate3d(100%, 0, 0); }
+	from { opacity: 1; -webkit-transform: none; }
+	to   { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); }
 }
 @keyframes slideOutToRight {
-	from { transform: none; }
-	to   { transform: translate3d(100%, 0, 0); }
+	from { opacity: 1; transform: none; }
+	to   { opacity: 0; transform: translate3d(100%, 0, 0); }
 }