From 53a6eb2c8ab8ba0d57f048280315ce29a5d3124c Mon Sep 17 00:00:00 2001
From: Vera Chernushina <chernushina.vera@gmail.com>
Date: Sun, 20 Oct 2024 21:31:49 +0300
Subject: [PATCH] module2-task1: animate rules blocks

---
 source/scss/blocks/key-frames.scss | 43 ++++++++++++++++++++++++++++++
 source/scss/blocks/rules.scss      | 17 ++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/source/scss/blocks/key-frames.scss b/source/scss/blocks/key-frames.scss
index c3f3a9c..d4eb775 100644
--- a/source/scss/blocks/key-frames.scss
+++ b/source/scss/blocks/key-frames.scss
@@ -13,6 +13,49 @@
   }
 }
 
+@keyframes fadeInBullet {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInButton {
+  0% {
+    transform: scaleX(0);
+    color: transparent;
+  }
+
+  95% {
+    color: transparent;
+  }
+
+  100% {
+    transform: scaleX(1);
+    color: $c-dark;
+  }
+}
+
+@keyframes fadeInText {
+  0% {
+    opacity: 0;
+    transform: translateX(2rem);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 @keyframes fadeRight {
   0% {
     width: 0;
diff --git a/source/scss/blocks/rules.scss b/source/scss/blocks/rules.scss
index c3dbb34..8776ac1 100644
--- a/source/scss/blocks/rules.scss
+++ b/source/scss/blocks/rules.scss
@@ -159,6 +159,8 @@
     border-radius: 50%;
     line-height: 5rem;
     text-align: center;
+    opacity: 0;
+    animation: fadeInBullet 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
 
     @media (max-width: $tablet) and (orientation: portrait) {
       top: 1rem;
@@ -179,17 +181,32 @@
 
   p {
     margin: 0;
+    animation: fadeInText 0.8s ease-out forwards;
+    opacity: 0;
 
     @media (max-width: $tablet) and (orientation: portrait) {
       min-height: calc(1.4rem * 2.2);
     }
   }
+
+  &:nth-child(2)::before, &:nth-child(2)>p {
+    animation-delay: 0.4s;
+  }
+  &:nth-child(3)::before, &:nth-child(3)>p {
+    animation-delay: 0.8s;
+  }
+  &:nth-child(4)::before, &:nth-child(4)>p {
+    animation-delay: 1.2s;
+  }
 }
 
 .rules__link {
   position: absolute;
   bottom: 6rem;
   right: 5.6rem;
+  transform: scaleX(0);
+  transform-origin: right;
+  animation: fadeInButton 0.4s ease-out forwards 1.6s;
 
   @media (min-width: $stop-scaling) {
     bottom: 60px;