From 4a6a7e8890812c6efe14bd13ace6cbfcbe234b15 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Thu, 29 Apr 2021 14:55:21 +0300
Subject: [PATCH] created animation for the title

---
 src/components/header/header.css | 38 ++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/components/header/header.css b/src/components/header/header.css
index 19c8701..46c3098 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -32,6 +32,8 @@
 .heading-primary {
   color: #ffff;
   text-transform: uppercase;
+
+  backface-visibility: hidden;
 }
 
 .heading-primary-main {
@@ -39,6 +41,8 @@
   font-size: 60px;
   font-weight: 400;
   letter-spacing: 35px;
+
+  animation: moveInLeft 1s ease-out;
 }
 
 .heading-primary-sub {
@@ -46,4 +50,38 @@
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 17.4px;
+
+  animation: moveInRight 1s ease-out;
+}
+
+@keyframes moveInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  80% {
+    transform: translateX(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+@keyframes moveInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+
+  80% {
+    transform: translateX(-10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
 }