From 5536e4b73efcff5519986b53f6300c12766857e9 Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Fri, 2 Apr 2021 20:33:15 +0200
Subject: [PATCH] deux animations

---
 styles/index.css | 50 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/styles/index.css b/styles/index.css
index ac84e0f..8ce0c92 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -92,38 +92,52 @@ body main {
 
 /*------------------------------------------*/
 /*THE ANIMATION*/
-@keyframes rotation {
-	0%		{transform: rotate(0deg);	transform-origin: 49%	50%;}
-	50%		{transform: rotate(360deg);	transform-origin: 49%	50%;}
-	50.1%	{transform: rotate(360deg);	transform-origin: 51%	50%;}
-	100%	{transform: rotate(0deg);	transform-origin: 51%	50%;}
+@keyframes position {
+	0%		{transform: translate(   0%,    0%);}
+	5%		{transform: translate( 0.5%, -0.5%);}
+	10%		{transform: translate(   1%,    0%);}
+	15%		{transform: translate( 0.5%, -0.5%);}
+	20%		{transform: translate(   0%,   -1%);}
+	25%		{transform: translate(-0.5%, -0.5%);}
+	30%		{transform: translate(  -1%,    0%);}
+	35%		{transform: translate(-0.5%, -0.5%);}
+	40%		{transform: translate(   0%,   -1%);}
+	45%		{transform: translate(-0.5%, -0.5%);}
+	50%		{transform: translate(  -1%,    0%);}
+	55%		{transform: translate(-0.5%,  0.5%);}
+	60%		{transform: translate(   0%,    1%);}
+	65%		{transform: translate( 0.5%,  0.5%);}
+	70%		{transform: translate(   1%,    1%);}
+	75%		{transform: translate( 0.5%,  0.5%);}
+	80%		{transform: translate(   1%,    0%);}
+	85%		{transform: translate( 0.5%, -0.5%);}
+	90%		{transform: translate(   0%,   -1%);}
+	95%		{transform: translate(-0.5%, -0.5%);}
+	100%	{transform: translate(  -1%,    0%);}
 }
 .logo_bubbles .circle {
-	animation-name: rotation;
+	animation-name: position;
+	animation-duration: 1s;
 	animation-delay: 0s;
 	animation-timing-function: linear;
 	animation-iteration-count: infinite;
-	animation-direction: normal;
+	animation-direction: alternate;
 }
 .logo_bubbles .circle._1 {
-	animation-duration: 2s;
-	animation-delay: 0s;
+	animation-delay: -0.8s;
 	animation-direction: reverse;
 }
 .logo_bubbles .circle._2 {
-	animation-duration: 2s;
-	animation-delay: 0.7s;
-	animation-direction: reverse;
+	animation-delay: -2.7s;
 }
 .logo_bubbles .circle._3 {
-	animation-duration: 1s;
-	animation-delay: 0.3s;
-}
-.logo_bubbles .circle._4 {
-	animation-duration: 1s;
-	animation-delay: 0.5s;
+	animation-delay: -1.3s;
 	animation-direction: reverse;
 }
+.logo_bubbles .circle._4 {
+	animation-delay: 0s;
+}
+