#asterisk-rotate{
    animation: spin 5s linear infinite;
    transform-origin: center;
    transform-box: fill-box; 
}
#balken-1{
    animation: balken 2s linear;
}

#balken-2 {
    animation: balken 2s linear;
    animation-delay: 300ms;
    animation-fill-mode: forwards;
}

#balken-2 {
    clip-path: inset(0 0 100% 0);
}

#leistung-1 {
    animation: leistung 1.5s linear;
 
}


#leistung-2 {
    animation: leistung 1.5s linear;
    animation-delay: 300ms;
    transform: translatey(-590px) translateX(300px);
    animation-fill-mode: forwards;
}

#smiley{
    animation: smiley-rotate 1.5s;
    transform-origin: center center;
    transform-box: fill-box; 
}

#auge{
    animation: zwinkern 500ms;
    animation-delay: 500ms;
    transform-origin: center center;
    transform-box: fill-box; 
    backface-visibility: hidden;
}


@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes balken{
    0% { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0);  }
  }

  @keyframes leistung {
    0%{
        transform: translatey(-590px) translateX(290px);
    }
    100%{
        transform: translatey(0px) translateX(0px);
    }
  }

  @keyframes smiley-rotate {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    75% {
        transform: rotate(90deg);
    }
    100%{
        transform: rotate(0deg);
    }
}


@keyframes zwinkern{
    0% {
        transform: rotate(0deg) ;
    }
   
    50% {
        transform: rotate(90deg); clip-path: inset(0 20% 0 0);
    }
 
    100% {
        transform: rotate(0deg);clip-path: inset(0); 
    }
}