Merge pull request #325 from filmstarr/master

Adjust asd animation to fix second half of flip animation on iOS devi…
objectivehtml · Oct 28, 2018 · 6559204 · 6559204
2 parents c7a5334 + d9ab089
commit 6559204
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 34 deletions.
diff --git a/compiled/flipclock.css b/compiled/flipclock.css
@@ -173,9 +173,9 @@
 .flip-clock-wrapper .flip {   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
 
 .flip-clock-wrapper ul.play li.flip-clock-active {
-  -webkit-animation: asd 0.5s 0.5s linear both;
-  -moz-animation: asd 0.5s 0.5s linear both;
-  animation: asd 0.5s 0.5s linear both;
+  -webkit-animation: asd 0.01s 0.49s linear both;
+  -moz-animation: asd 0.01s 0.49s linear both;
+  animation: asd 0.01s 0.49s linear both;
   z-index: 5; }
 
 .flip-clock-divider {
@@ -221,39 +221,27 @@
   0% {
     z-index: 2; }
 
-  20% {
-    z-index: 4; }
-
   100% {
     z-index: 4; } }
 
 @-moz-keyframes asd {
   0% {
     z-index: 2; }
 
-  20% {
-    z-index: 4; }
-
   100% {
     z-index: 4; } }
 
 @-o-keyframes asd {
   0% {
     z-index: 2; }
 
-  20% {
-    z-index: 4; }
-
   100% {
     z-index: 4; } }
 
 @keyframes asd {
   0% {
     z-index: 2; }
 
-  20% {
-    z-index: 4; }
-
   100% {
     z-index: 4; } }
 

diff --git a/src/flipclock/css/flipclock.css b/src/flipclock/css/flipclock.css
@@ -173,9 +173,9 @@
 .flip-clock-wrapper .flip {   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
 
 .flip-clock-wrapper ul.play li.flip-clock-active {
-  -webkit-animation: asd 0.5s 0.5s linear both;
-  -moz-animation: asd 0.5s 0.5s linear both;
-  animation: asd 0.5s 0.5s linear both;
+  -webkit-animation: asd 0.01s 0.49s linear both;
+  -moz-animation: asd 0.01s 0.49s linear both;
+  animation: asd 0.01s 0.49s linear both;
   z-index: 5; }
 
 .flip-clock-divider {
@@ -221,39 +221,27 @@
   0% {
     z-index: 2; }
 
-  20% {
-    z-index: 4; }
-
   100% {
     z-index: 4; } }
 
 @-moz-keyframes asd {
   0% {
     z-index: 2; }
 
-  20% {
-    z-index: 4; }
-
   100% {
     z-index: 4; } }
 
 @-o-keyframes asd {
   0% {
     z-index: 2; }
 
-  20% {
-    z-index: 4; }
-
   100% {
     z-index: 4; } }
 
 @keyframes asd {
   0% {
     z-index: 2; }
 
-  20% {
-    z-index: 4; }
-
   100% {
     z-index: 4; } }
 

diff --git a/src/flipclock/css/flipclock.scss b/src/flipclock/css/flipclock.scss
@@ -167,7 +167,7 @@
 }
 
 .flip-clock-wrapper ul.play li.flip-clock-active {
-    @include animation(asd .5s .5s linear both);
+    @include animation(asd .01s .49s linear both);
     z-index: 2;
 }
 
@@ -214,9 +214,6 @@
   0% {
     z-index:2;
   }
-  20% {
-    z-index:4;
-  }
   100% {
     z-index:4;
   }