Merge pull request #135 from nightven/animation-for-fonds

Amimation for fonds
nightven · Sep 7, 2023 · a7f8ca7 · a7f8ca7
2 parents f690d74 + dcb7491
commit a7f8ca7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/partials/fonds/fonds.html b/src/partials/fonds/fonds.html
@@ -1,4 +1,4 @@
-<div class="fonds__common">
+<div class="fonds__common scale-up-center">
   <div class="common__title">
     <h2 class="support__Ukraine">Support Ukraine</h2>
     <svg class="trident">

diff --git a/src/sass/_fonds.scss b/src/sass/_fonds.scss
@@ -22,7 +22,34 @@
     max-width: 356px;
   }
 }
+.scale-up-center {
+  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
+
+@-webkit-keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
 
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
 .support__Ukraine {
   color: #fff;
   font-family: DM Sans;