added button and css to make the record easier

old/index.html

@@ -17,6 +17,7 @@
 				<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
 			</div>
 			<div class="logo_bubbles">
+				<input type="checkbox" id="toggle_animate">
 				<div class="_ratio">
 					<div class="circle _2"><div class="_ratio"></div></div>
 					<div class="circle _3"><div class="_ratio"></div></div>

old/styles/index.css

@@ -94,37 +94,47 @@ body main {
 /*THE ANIMATION*/
 @keyframes position {
 	0%		{transform: translate( 0%,  0%);}
-	20%		{transform: translate( 1%, -1%);}
-	30%		{transform: translate(-1%,  0%);}
-	40%		{transform: translate( 1%, -1%);}
-	50%		{transform: translate( 0%,  1%);}
-	60%		{transform: translate( 1%, -1%);}
+	20%		{transform: translate( 2%, -2%);}
+	30%		{transform: translate(-2%,  0%);}
+	40%		{transform: translate( 2%, -2%);}
+	50%		{transform: translate( 0%,  2%);}
+	60%		{transform: translate( 2%, -2%);}
 	70%		{transform: translate( 0%,  0%);}
-	80%		{transform: translate(-1%, -1%);}
-	90%		{transform: translate( 1%, -1%);}
+	80%		{transform: translate(-2%, -2%);}
+	90%		{transform: translate( 2%, -2%);}
 	100%	{transform: translate( 0%,  0%);}
 }
+#toggle_animate {
+	position: fixed;
+	top: 100px;
+	left: 100px;
+}
+#toggle_animate:checked + ._ratio .circle {
+/*
 .logo_bubbles .circle {
+*/
 	animation-name: position;
 	animation-duration: 8s;
 	animation-delay: 0s;
 	animation-timing-function: linear;
 	animation-iteration-count: infinite;
+	animation-iteration-count: 2;
 	animation-direction: alternate;
-}
-.logo_bubbles .circle._1 {
-	animation-delay: -0.8s;
-	animation-direction: reverse;
-}
-.logo_bubbles .circle._2 {
-	animation-delay: -2.7s;
-}
-.logo_bubbles .circle._3 {
-	animation-delay: -1.3s;
-	animation-direction: reverse;
-}
-.logo_bubbles .circle._4 {
-	animation-delay: 0s;
+	&._1 {
+		animation-delay: -0.8s;
+		animation-direction: reverse;
+	}
+	&._2 {
+		animation-delay: -2.7s;
+	}
+	&._3 {
+		animation-delay: -1.3s;
+		animation-direction: reverse;
+	}
+	&._4 {
+		animation-delay: 0s;
+		animation-iteration-count: 1;
+	}
 }
 
 
@@ -139,10 +149,14 @@ body main {
 	padding: 0px;
 }
 .logo_links > :first-child {
+	/*
 	margin-left: 0px;
+	*/
 }
 .logo_links > :last-child {
+	/*
 	margin-right: 0px;
+	*/
 }
 .logo_links #kosmopolit a {
 	color: var(--color-purple);