Alle Levelarten implementiert

src/scss/wordRotator.scss

@@ -17,24 +17,16 @@ $animationDuration: 0.25s;
   @keyframes rotate-#{nth($rotationDegrees, $i)} {
     0% {
       transform: rotate(#{$startDegree}deg);
-      background-color: transparent;
-      z-index: 0;
-    }
-    99% {
-      transform: rotate(#{nth($rotationDegrees, $i)}deg);
-      background-color: transparent;
-      z-index: 0;
     }
     100% {
       transform: rotate(#{nth($rotationDegrees, $i)}deg);
-      background-color: white;
-      z-index: 1;
     }
   }
 }
 
 .segment:not(.segment-row):not(.segment-triangle) {
   &.rotating {
+    z-index: 10 !important;
     overflow: hidden;
 
     @for $i from 1 through length($rotationDegrees) {
@@ -56,7 +48,6 @@ $animationDuration: 0.25s;
               $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
               &.rotate-#{nth($rotationDegrees, $j)} {
                 animation-name: rotate-#{$animationName};
-
               }
             }
           }
@@ -91,20 +82,6 @@ $animationDuration: 0.25s;
                   animation-duration: $animationDuration;
                   animation-fill-mode: forwards;
                   animation-timing-function: linear;
-
-                  > .child-container {
-                    > .segment {
-                      @if $animationName==360 {
-                        $animationName: 0;
-                      }
-                      //animation-name: rotate-#{90+ $animationName};
-                      //animation-duration: 2.5s;
-                      //animation-fill-mode: forwards;
-                      //animation-direction: reverse;
-                      //animation-timing-function: linear;
-
-                    }
-                  }
                 }
               }
             }
@@ -147,6 +124,7 @@ $animationDuration: 0.25s;
   }
 
   &.segment-leaf {
+    background-color: transparent;
     min-width: 1em;
     padding: 0.8em;
     &:before {
@@ -156,11 +134,11 @@ $animationDuration: 0.25s;
     }
     .leaf-element {
       position: absolute;
+      width: 100%;
+      height: 100%;
+      line-height: 1.5em;
       top: 0;
       left: 0;
-      right: 0;
-      bottom: 0;
-      transform: translateY(50%);
     }
   }