Improved animations

config.ini

@@ -14,7 +14,7 @@ more = Weiter »»»
 title = A oder B
 mail_link = Einreichen!
 help_link = Hilfe?
-help = <strong>Hilfe</strong><p>Wähle die Antworten in beliebiger Reihenfolge durch Klicken/Tippen oder mit der Tastatur (a/b) aus. Sobald alle Antworten ausgewählt wurden, werden nach einer kurzen Wartezeit automatisch neue Fragen geladen.</p><p>Möchtest du nicht alle Fragen beantworten, klicke einfach auf die Schaltfläche "Weiter" unten rechts (das klappt auch, während der Countdown läuft).</p><p>Klicke/tippe außerhalb dieses Fensters oder bewege die Maus, um fortzufahren.</p><p>Diese Webseite zeichnet keine Daten auf und verwendet keine Cookies.</p>
+help = <strong>Hilfe</strong><p>Wähle die Antworten durch Klicken/Tippen oder mit der Tastatur durch Drücken der Tasten "a" bzw. "b" aus (beantwortet die jeweils nächste unbeantwortete Frage). Sobald alle Antworten ausgewählt wurden, werden nach einer kurzen Wartezeit automatisch neue Fragen geladen.</p><p>Möchtest du nicht alle Fragen beantworten, klicke einfach auf die Schaltfläche "Weiter" unten rechts oder drücke "F5" (beides klappt auch, während der Countdown läuft).</p><p>Klicke/tippe außerhalb dieses Fensters oder bewege die Maus, um fortzufahren.</p><p>Diese Webseite zeichnet keine Daten auf und verwendet keine Cookies.</p>
 separator = oder
 questions_prefix = Es gibt derzeit
 questions_suffix = Fragen.

static/css/animations.css

@@ -1,9 +1,34 @@
-label.a.slide {
+label.a.slide1 {
     animation-duration: 1s;
     animation-name: slideinfromleft;
     position: relative;
 }
 
+label.a.slide2 {
+    animation-duration: 1.25s;
+    animation-name: slideinfromleft;
+    position: relative;
+}
+
+label.a.slide3 {
+    animation-duration: 1.5s;
+    animation-name: slideinfromleft;
+    position: relative;
+}
+
+label.a.slide4 {
+    animation-duration: 1.75s;
+    animation-name: slideinfromleft;
+    position: relative;
+}
+
+label.a.slide5 {
+    animation-duration: 2s;
+    animation-name: slideinfromleft;
+    position: relative;
+}
+
+
 @keyframes slideinfromleft {
     from {
         left: -640px;
@@ -14,12 +39,36 @@ label.a.slide {
     }
 }
 
-label.b.slide {
+label.b.slide1 {
     animation-duration: 1s;
     animation-name: slideinfromright;
     position: relative;
 }
 
+label.b.slide2 {
+    animation-duration: 1.25s;
+    animation-name: slideinfromright;
+    position: relative;
+}
+
+label.b.slide3 {
+    animation-duration: 1.5s;
+    animation-name: slideinfromright;
+    position: relative;
+}
+
+label.b.slide4 {
+    animation-duration: 1.75s;
+    animation-name: slideinfromright;
+    position: relative;
+}
+
+label.b.slide5 {
+    animation-duration: 2s;
+    animation-name: slideinfromright;
+    position: relative;
+}
+
 @keyframes slideinfromright {
     from {
         left: 640px;

static/css/base.css

@@ -30,7 +30,7 @@ a #help {
 
 a:hover #help {
     position: absolute;
-    top: 65px;
+    top: 70px;
     left: 50%;
     height: auto;
     width: 50%;

templates/index.html

@@ -6,10 +6,10 @@
         {%- set id.value = id.value + 1 %}
         <div class="ab">
             <input type="radio" id="a{{ id.value }}" class="a" name="group-{{ id.value }}">
-            <label for="a{{ id.value }}" class="a slide" title="{{ question['A'] }}"> A)&nbsp;{{ question['A'] }}</label>
+            <label for="a{{ id.value }}" class="a slide{{ id.value }}" title="{{ question['A'] }}"> A)&nbsp;{{ question['A'] }}</label>
             <div class="separator">{{ separator }}</div>
             <input type="radio" id="b{{ id.value }}" class="b" name="group-{{ id.value }}">
-            <label for="b{{ id.value }}" class="b slide" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label>
+            <label for="b{{ id.value }}" class="b slide{{ id.value }}" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label>
         </div>
         <hr>
         {%- endfor %}