From 3be0a8007860fc4e802d33922fdfd765ecfee38b Mon Sep 17 00:00:00 2001
From: Param Siddharth <30315706+paramsiddharth@users.noreply.github.com>
Date: Fri, 27 Mar 2020 11:22:08 +0530
Subject: [PATCH] Updated style.css

Added better transitions and fixed abrupt animations.
---
 style.css | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/style.css b/style.css
index 38a4828..e1cb02e 100644
--- a/style.css
+++ b/style.css
@@ -20,7 +20,7 @@ h1{
 	background-color: rgba(255, 255, 124,0.3);
 	font-size:3rem;
 	text-align: center;
-	
+	transition: all 2s ease;
 }
 .btn{
 	margin-top: 50px;
@@ -34,7 +34,9 @@ h1{
 }
 .btn-primary {
   background-color: rgba(165, 102, 199,0.5);
-  border-color: rgba(165, 102, 199,0.5); }
+  border-color: rgba(165, 102, 199,0.5); 
+  transition: 1s ease-in-out;
+  }
 .btn-primary:hover {
   background-color: rgba(165, 102, 199,1.0);
   border-color: rgba(165, 102, 199,1.0);
@@ -45,21 +47,23 @@ h1{
 }
 @keyframes color{
 	0%{
-		background-color: rgba(255, 255, 124,0.3);
-	}
-	50%{
+  background-color: rgba(255, 255, 124,0.3);
+ }
+	33%{
 		background-color: rgba(251, 136, 90,0.6);
-		transform: skew(25deg);
+		transform: skew(25deg) scale(1.2,3);
 	}
-	100%{
+	66%{
 		background-color: rgba(107, 221, 107,0.7);
 	}
+ 100%{
+  background-color: rgba(255, 255, 124,0.3);
+ }
 }
 h1:hover{
 	cursor: no-drop;
-	transition: 1s ease-in-out;
-	transform: scale(1.2,3);
+	transition: 1s cubic-bezier(.85,.07,.34,.95);
 	animation-name: color;
-	animation-duration: 2s;
+	animation-duration: 1.4s;
 	animation-iteration-count: infinite;
-}
\ No newline at end of file
+}