From: Frédéric Péters <fpeters@0d.be>
Date: Thu, 25 Apr 2024 19:21:35 +0000 (+0200)
Subject: adjust animations
X-Git-Url: https://git.0d.be/?p=panikweb-esperanzah.git;a=commitdiff_plain

adjust animations
---

diff --git a/panikweb_esperanzah/static/css/style.scss b/panikweb_esperanzah/static/css/style.scss
index abdae2e..c119ca7 100644
--- a/panikweb_esperanzah/static/css/style.scss
+++ b/panikweb_esperanzah/static/css/style.scss
@@ -473,7 +473,7 @@ button.check:before, a.check:before {
 		bottom: 0;
 		z-index: -100;
 		transform-origin: bottom center;
-		animation: wave_flag 4s infinite;
+		animation: wave_flag 10s infinite;
 		@media screen and (max-width: $size_s) {
 			content: none;
 		}
@@ -486,6 +486,18 @@ button.check:before, a.check:before {
 		transform: rotate(-2deg)
 	}
 	50% {
+		transform: rotate(-2deg)
+	}
+	55% {
+		transform: rotate(1deg)
+	}
+	60% {
+		transform: rotate(-2deg)
+	}
+	80% {
+		transform: rotate(-2deg)
+	}
+	90% {
 		transform: rotate(2deg)
 	}
 	100% {
@@ -1611,7 +1623,7 @@ div.emission-tile {
 		height: 100px;
 		background: url(../img/2024/boussole.png) top left no-repeat;
 		background-size: 100px;
-			animation: rotate 4s infinite;
+			animation: rotate 40s infinite;
 	}
 	@media screen and (max-width: $size_s) {
 		top: 0;
@@ -1623,12 +1635,17 @@ div.emission-tile {
 }
 
 @keyframes rotate {
-	0% {
-		transform: rotate(-10deg)
-	}
-	100% {
-		transform: rotate(350deg)
-	}
+	0% { transform: rotate(-10deg) }
+	10% { transform: rotate(10deg) }
+	20% { transform: rotate(-10deg) }
+	30% { transform: rotate(10deg) }
+	40% { transform: rotate(-10deg) }
+	50% { transform: rotate(10deg) }
+	60% { transform: rotate(-10deg) }
+	70% { transform: rotate(10deg) }
+	80% { transform: rotate(-15deg) }
+	90% { transform: rotate(-10deg) }
+	100% { transform: rotate(350deg) }
 }
 
 #instagram,
@@ -2013,7 +2030,7 @@ div#header_date {
 	font-weight: normal;
 	font-style: italic;
 	font-size: 120%;
-        top: 63px;
+        top: 89px;
         right: 55px;
 	@media screen and (max-width:$size_m){
 		display: none;