Animate done in circle meme

2 files changed, 59 insertions, 33 deletions

diff --git a/index.html b/index.html
index 30a0988..f9f9507 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
       </div>
       <div class="collapsable block-step2">
         <div onclick="step1_done()" class="block-header">
-          <h2 id="head2"><div class="circle_num">1</div> Wer mahnt ab?</h2>
+          <h2 id="head2"><div class="circle_num undone">1</div><div class="circle_num done">✓</div> Wer mahnt ab?</h2>
         </div>
         <div class="juice">
           <div><a href="javascript:ausfuellen()" class="button">Debug: pre-fill</a></div>
@@ -81,7 +81,7 @@
       </div>
       <div class="collapsable block-step3">
         <div onclick="step2_done()" class="block-header">
-          <h2 id="head3"><div class="circle_num">2</div> Wie lautet das Aktenzeichen?</h2>
+          <h2 id="head3"><div class="circle_num undone">2</div><div class="circle_num done">✓</div> Wie lautet das Aktenzeichen?</h2>
         </div>
         <div class="juice">
           <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p>
@@ -164,7 +164,7 @@
       </div>
       <div class="collapsable block-step4">
         <div onclick="step3_done()" class="block-header">
-          <h2 id="head4"><div class="circle_num">3</div> Warum sind Sie nicht Täter?</h2>
+          <h2 id="head4"><div class="circle_num undone">3</div><div class="circle_num done">✓</div> Warum sind Sie nicht Täter?</h2>
         </div>
         <div class="juice">
           <p>Damit Sie korrekte Belege gegen den Vorwurf anführen können, sammeln wir alle nun Informationen ein, die der abmahnenden Kanzlei verdeutlichen, warum die Abmahnung unberechtigt ist.</p>
@@ -185,7 +185,7 @@
       </div>
       <div class="collapsable block-step5">
         <div onclick="step4_done()" class="block-header">
-          <h2 id="head5"><div class="circle_num">4</div> Warum sind Sie kein Störer?</h2>
+          <h2 id="head5"><div class="circle_num undone">4</div><div class="circle_num done">✓</div> Warum sind Sie kein Störer?</h2>
         </div>
         <div class="juice">
           <p>Um nicht als Störer in Haftung genommen zu werden, sind Hinweise hilfreich, aus welchem Grund auch eine Störerhaftung nicht in Betracht kommt. Bitte wählen Sie die entsprechenden Häkchen.</p>
@@ -197,7 +197,7 @@
           <div><input id="alibi_nachbarn" type="checkbox"/><label for="alibi_nachbarn"><span></span>Neben mir benutzen mehrere Nachbarn mein Netzwerk.</label></div>
           <div><input id="alibi_fluechtlingshilfe" type="checkbox"/><label for="alibi_fluechtlingshilfe"><span></span>Ich stelle mein Netzwerk einem Flüchtlingsheim zur Verfügung.</label></div>
           <p></p>
-          <div class="hint">Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. <b>Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.</b></div>
+          <div class="hint">Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.</div>
           <div class="one-button">
             <div class="button button-green" onclick="step5_done()">Weiter</div>
           </div>
@@ -205,7 +205,7 @@
       </div>
       <div class="collapsable block-step6">
         <div onclick="step5_done()" class="block-header">
-          <h2 id="head6"><div class="circle_num">5</div> Wer wird abgemahnt?</h2>
+          <h2 id="head6"><div class="circle_num undone">5</div><div class="circle_num done">✓</div> Wer wird abgemahnt?</h2>
         </div>
         <div class="juice">
           <p>Hier benötigen wir Ihre Informationen, um das Anschreiben mit einem Absender zu versehen. Bitte fügen Sie Namen und Adresse wie auf der Abmahnung ein.</p>
@@ -262,7 +262,6 @@
             </div></a>
           </div>
           <div class="credit imprint" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div>
-          <hr/>
           <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> (Konzept + Umsetzung)</div>
           <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> (Rechtliches)</div>
           <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> (Design) ∙ <a href="http://elektrowecker.de/">Pepo</a> (UX)</div>
diff --git a/style.css b/style.css
index 5467408..06d4c53 100644
--- a/style.css
+++ b/style.css
@@ -285,6 +285,11 @@ label {
   font-weight: normal;
 }
 
+.circle_num.undone {
+  transform: rotate3d(0, 0, 0, 0deg);
+  transition: transform 0.5s 0.5s, visibility 0.5s 0.5s;
+}
+
 /* step1 has a h1 and the circle needs more finetuning to fit headline */
 .block-step1 .circle_num {
   margin: 4px 28px 0 0;
@@ -302,7 +307,7 @@ label {
   border-bottom: dotted 1px rgba(0,0,0,0.25);
 }
 
-/* Our intra-step animations rely on the section's max-height being
+/* Our inter-step animations rely on the section's max-height being
    transitioned from 0 to the original height.
    Initially hide all sections and only unhide them depending on the
    global state (as set with a class on the wrapper element)
@@ -415,23 +420,53 @@ label {
 
 /* Style things that depend on the progress.
    Example: circles turn squares when a step is finished */
-#wrapper.step3 .block-step2 .circle_num,
-#wrapper.step4 .block-step2 .circle_num,
-#wrapper.step5 .block-step2 .circle_num,
-#wrapper.step6 .block-step2 .circle_num,
-#wrapper.step7 .block-step2 .circle_num,
-#wrapper.step4 .block-step3 .circle_num,
-#wrapper.step5 .block-step3 .circle_num,
-#wrapper.step6 .block-step3 .circle_num,
-#wrapper.step7 .block-step3 .circle_num,
-#wrapper.step5 .block-step4 .circle_num,
-#wrapper.step6 .block-step4 .circle_num,
-#wrapper.step7 .block-step4 .circle_num,
-#wrapper.step6 .block-step5 .circle_num,
-#wrapper.step7 .block-step5 .circle_num,
-#wrapper.step7 .block-step6 .circle_num {
-  border-radius: 1px !important;
-  transition: border-radius, 2s;
+#wrapper.step3 .block-step2 .circle_num.undone,
+#wrapper.step4 .block-step2 .circle_num.undone,
+#wrapper.step5 .block-step2 .circle_num.undone,
+#wrapper.step6 .block-step2 .circle_num.undone,
+#wrapper.step7 .block-step2 .circle_num.undone,
+#wrapper.step4 .block-step3 .circle_num.undone,
+#wrapper.step5 .block-step3 .circle_num.undone,
+#wrapper.step6 .block-step3 .circle_num.undone,
+#wrapper.step7 .block-step3 .circle_num.undone,
+#wrapper.step5 .block-step4 .circle_num.undone,
+#wrapper.step6 .block-step4 .circle_num.undone,
+#wrapper.step7 .block-step4 .circle_num.undone,
+#wrapper.step6 .block-step5 .circle_num.undone,
+#wrapper.step7 .block-step5 .circle_num.undone,
+#wrapper.step7 .block-step6 .circle_num.undone {
+  transform: rotate3d(45, 45, 1, 90deg);
+  transition: transform 0.5s, visibility 0.5s;
+  visibility: hidden;
+}
+
+.circle_num.done {
+  position: relative;
+  margin-right: -68px;
+  left: -68px;
+  visibility: hidden;
+  transition: transform 0.5s, visibility 0.5s;
+  transform: rotate3d(45, 45, 1, 90deg);
+}
+
+#wrapper.step3 .block-step2 .circle_num.done,
+#wrapper.step4 .block-step2 .circle_num.done,
+#wrapper.step5 .block-step2 .circle_num.done,
+#wrapper.step6 .block-step2 .circle_num.done,
+#wrapper.step7 .block-step2 .circle_num.done,
+#wrapper.step4 .block-step3 .circle_num.done,
+#wrapper.step5 .block-step3 .circle_num.done,
+#wrapper.step6 .block-step3 .circle_num.done,
+#wrapper.step7 .block-step3 .circle_num.done,
+#wrapper.step5 .block-step4 .circle_num.done,
+#wrapper.step6 .block-step4 .circle_num.done,
+#wrapper.step7 .block-step4 .circle_num.done,
+#wrapper.step6 .block-step5 .circle_num.done,
+#wrapper.step7 .block-step5 .circle_num.done,
+#wrapper.step7 .block-step6 .circle_num.done {
+  visibility: visible;
+  transform: rotate3d(0,0,0,0deg);
+  transition: transform 0.5s 0.5s, visibility 0.5s 0.5s;
 }
 
 /* Make shift date selector */
@@ -535,14 +570,6 @@ select.zeit {
   margin-bottom: 0.3em;
 }
 
-.credits hr {
-  height: 1px;
-  width: 90px;
-  margin-bottom: 1em;
-  border: 0;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
-}
-
 /* ******** Horizontal footer slide magic ******** */
 
 .scrollcontainer {