🔨 using @Keyframes animation

GirkovArpa · Feb 24, 2021 · aec3251 · aec3251 · GirkovArpa · Feb 24, 2021
1 parent 5f9bd48
commit aec3251
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 70 deletions.
diff --git a/main.css b/main.css
@@ -22,64 +22,52 @@ body {
   top: 50%;
   box-shadow: rgba(0, 0, 0, 0.18) 0px 3px 10px 0px;
   background-color: white;
-  background-position: 0 240px;
-  background-image: url(face1.png);
-  background-repeat: no-repeat;
   transform: translate(0, -50%) rotate(0deg) scale(1.0, 1.0);
-  transition: background-position .5s bounce-in, transform .5s expo-out, left .5s expo-out;
+  transition: transform .5s expo-out, left .5s expo-out;
 }
 
-.card.flip {}
-
-.card::marker {
-  border-radius: 10px;
-  z-index: -1.1;
-  size: *;
-  background-color: transparent;
-  opacity: 1;
-  background-position: 0px 240px;
-  background-image: url(assets/images/face1.png);
-  background-repeat: no-repeat;
-  transition: background-position .5s bounce-in;
-}
-
-.card.a {
+.card.flyin {
   transform: translate(-50%, -50%) rotate(0deg) scale(1.0, 1.0);
   left: 50%;
 }
 
-.card.b::marker {
-  background-position: 0 0;
-  z-index: 1.1;
-}
-
-.card.c {
-  transform: translate(-30%, -50%) rotate(10deg) scale(1.0, 1.0);
-}
-
-.card.c::marker {
-  background-image: url(assets/images/face2.png);
-}
-
-.card.c-2 {
-  transform: translate(-50%, -50%) rotate(0deg) scale(1.0, 1.0);
-}
-
-.card.d {
-  transform: translate(-50%, -50%) rotate(0deg) scale(1.0, 1.0);
-  left: -100px;
+@keyframes flyout {
+  0% {
+    foreground-image: url(assets/images/face1.png);
+    foreground-position: 0px 240px;
+    foreground-repeat: no-repeat;
+  }
+  15% {
+    foreground-position: 0px 0px;
+    transition: foreground-position 1s bounce-in;
+    transform: translate(-50%, -50%) rotate(10deg); 
+  }
+  30% {
+    foreground-image: url(assets/images/face2.png) 0px 0px no-repeat;
+    transform: translate(-30%, -50%) rotate(10deg); 
+  }
+  80% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-1000%, -50%) rotate(0deg);
+  }
+}
+
+.card.flyout {
+  animation: linear flyout 1.5s;
+}
+
+@keyframes nod {
+  0%   { left: 51%; }
+  25%  { left: 49%; }
+  50%  { left: 51%; }
+  75%  { left: 49%; }
+  100% { left: 51%; }
 }
 
 .card.incorrect {
-  transition: left 0.05s linear;
-}
-
-.card.incorrect-a {
-  left: 49%;
-}
-
-.card.incorrect-b {
-  left: 51%;
+  animation: linear nod 500ms;
 }
 
 .card.flip {

diff --git a/main.js b/main.js
@@ -47,18 +47,9 @@ async function displayCard(Q, A) {
       }
       if (!correct && !this.parentElement.classList.contains('incorrect')) {
         this.classList.add('incorrect');
-        this.parentElement.classList.add('incorrect', 'incorrect-a');
-        await seconds(0.05);
-        this.parentElement.classList.add('incorrect-b');
-        this.parentElement.classList.remove('incorrect-a');
-        await seconds(0.05);
-        this.parentElement.classList.add('incorrect-a');
-        this.parentElement.classList.remove('incorrect-b');
-        await seconds(0.05);
-        this.parentElement.classList.add('incorrect-b');
-        this.parentElement.classList.remove('incorrect-a');
-        await seconds(0.05);
-        this.parentElement.classList.remove('incorrect-b', 'incorrect');
+        this.parentElement.classList.add('incorrect');
+        await seconds(0.5);
+        this.parentElement.classList.remove('incorrect');
       }
     }
   });
@@ -79,19 +70,13 @@ async function displayCard(Q, A) {
     $('.idk').style.display = 'block';
   });
 
-  await seconds(.5);
-  $('.card').classList.add('a');
+  await seconds(0.5);
+  $('.card').classList.add('flyin');
 }
 
 async function onCorrectAnswer() {
-  $('.card').classList.add('b');
-  await seconds(1);
-  $('.card').classList.add('c');
-  await seconds(.25);
-  $('.card').classList.add('c-2');
-  await seconds(.25);
-  $('.card').classList.add('d');
-  await seconds(.75);
+  $('.card').classList.add('flyout');
+  await seconds(1.3);
   $('.card').remove();
 }