Merge pull request #4 from Vika-0607/module2-task1

source/index.html

@@ -285,7 +285,7 @@ <h2 class="rules__title">Правила</h2>
               <p>&laquo;Соня&raquo; может отвечать только&nbsp;Да или Нет</p>
             </li>
           </ol>
-          <a href="#game" class="rules__link btn">Погнали!</a>
+          <a href="#game" class="rules__link btn animate__btn">Погнали!</a>
         </div>
       </div>
       <div class="screen__disclaimer">

source/scss/blocks/btn.scss

@@ -66,3 +66,34 @@
     }
   }
 }
+
+.animate__btn {
+  color: transparent;
+  animation-name: show-btn-text;
+  animation-duration: $btn-text-animation-duration;
+  animation-fill-mode: forwards;
+  animation-delay: $btn-animation-duration;
+
+  &:before {
+    width: 0;
+    border: none;
+    animation-name: show-btn;
+    animation-duration: $btn-animation-duration;
+    animation-fill-mode: forwards;
+  }
+}
+
+@keyframes show-btn {
+  from {
+    width: 6rem;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes show-btn-text {
+  to {
+    color: $c-dark;
+  }
+}

source/scss/blocks/rules.scss

@@ -1,3 +1,16 @@
+$counter-animation-duration: 0.3s;
+$counter-number-animation-duration: 0.4s;
+$text-animation-duration: 0.5s;
+$rules-btn-delay: 1s;
+
+@function counter-animation-delay($i) {
+  @return ($i - 1) * $counter-animation-duration;
+}
+
+@function text-animation-delay($i) {
+  @return counter-animation-delay($i + 1) - 0.1s;
+}
+
 .rules {
   position: relative;
   flex-grow: 1;
@@ -155,10 +168,16 @@
     font-family: $font-alt;
     font-weight: 400;
     font-size: 2.4rem;
+    color: transparent;
     background-color: $c-purple;
     border-radius: 50%;
     line-height: 5rem;
     text-align: center;
+    transform: scale(0);
+    animation-name: show-rule-counter, show-rule-counter-number;
+    animation-duration: $counter-animation-duration, $counter-number-animation-duration;
+    animation-fill-mode: forwards, forwards;
+    animation-timing-function: cubic-bezier(0.17, 0.67, 0.49, 1.31), ease;
 
     @media (max-width: $tablet) and (orientation: portrait) {
       top: 1rem;
@@ -179,11 +198,50 @@
 
   p {
     margin: 0;
+    opacity: 0;
+    animation-name: show-rule-text;
+    animation-duration: $btn-animation-duration;
+    animation-fill-mode: forwards;
 
     @media (max-width: $tablet) and (orientation: portrait) {
       min-height: calc(1.4rem * 2.2);
     }
   }
+
+  &:nth-of-type(1) {
+    p {
+      animation-delay: text-animation-delay(1);
+    }
+  }
+
+  &:nth-of-type(2) {
+    &::before {
+      animation-delay: counter-animation-delay(2);
+    }
+    p {
+      animation-delay: text-animation-delay(2);
+    }
+  }
+
+
+  &:nth-of-type(3) {
+    &::before {
+      animation-delay: counter-animation-delay(3);
+    }
+    p {
+      animation-delay: text-animation-delay(3);
+    }
+  }
+
+
+  &:nth-of-type(4) {
+    &::before {
+      animation-delay: counter-animation-delay(4);
+    }
+    p {
+      animation-delay: text-animation-delay(4);
+    }
+  }
 }
 
 .rules__link {
@@ -210,4 +268,40 @@
     bottom: 2rem;
     right: 1.5rem;
   }
+
+  &.animate__btn {
+    animation-delay: sum($rules-btn-delay, $btn-animation-duration);
+
+    &:before {
+      @include right;
+      animation-delay: $rules-btn-delay;
+    }
+  }
 }
+
+
+@keyframes show-rule-counter {
+  to { 
+    transform: scale(1);
+  }
+}
+
+@keyframes show-rule-counter-number {
+  40% {
+    color: transparent;
+  }
+  to { 
+    color: $c-light;
+  }
+}
+
+@keyframes show-rule-text {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

source/scss/general/functions.scss

@@ -0,0 +1,7 @@
+@function sum($numbers...) {
+  $sum: 0;
+  @each $number in $numbers {
+      $sum: $sum + $number;
+  }
+  @return $sum;
+}

source/scss/general/mixins.scss

@@ -58,3 +58,11 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+@mixin right {
+  position: absolute;
+  top: 50%;
+  left: auto;
+  right: 0;
+  transform: translate(0, -50%);
+}

source/scss/general/variables.scss

@@ -21,4 +21,7 @@ $retina-dppx: 1.5dppx;
 $index: 1.38871;
 
 $header-footer-easing: cubic-bezier(0, 0, 0.04, 1);
-$social-toggler-easing: cubic-bezier(0, 0, 0.26, 1.65);
+$social-toggler-easing: cubic-bezier(0, 0, 0.26, 1.65);
+
+$btn-animation-duration: 0.3s;
+$btn-text-animation-duration: 0.3s;

source/scss/style.scss

@@ -4,6 +4,7 @@
 @import "general/mixins.scss";
 @import "general/fonts.scss";
 @import "general/scaffolding.scss";
+@import "general/functions.scss";
 
 // Blocks
 @import "blocks/animation-screen.scss";