.grow {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: grow 2.2s;
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

.animate-hands #left-hand{
    animation: lefthandClink 1s forwards;
}
.animate-hands #right-hand{
    animation: righthandClink 1s forwards;
}


#win-pulse{
    animation: myblink 3s;
    animation-iteration-count: infinite;
}



@keyframes myblink{
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }
        11% {
            opacity: 1;
        }

        15% {
            opacity: 1;
        }
    16% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }
        26% {
            opacity: 1;
        }

        30% {
            opacity: 1;
        }
    31% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }



    55% {
        opacity: 0;
    }
        56% {
            opacity: 1;
        }

        68% {
            opacity: 1;
        }
    69% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }


}

@keyframes lefthandClink{
    0% {
        transform: translateY(129px) translateX(-155px) ;
    }
    30% {
        transform: translateY(129px) translateX(-155px) ;
    }
    80%{
        transform: rotate(0deg) translateY(0px) translateX(-4px) ;
    }
    90%{
        transform: rotate(-2deg) translateX(-4px) ;   
    }
    100%{
        transform: rotate(0deg) translateX(-4px) ;   
    }
}


@keyframes righthandClink{
    0% {
        transform: translateX(205px) ;
    }
    30% {
        transform: translateX(205px) ;
    }
    80%{
        transform: rotate(0deg) translateX(4px) ;
    }
    90%{
        transform: rotate(2deg) translateX(4px) ;   
    }
    100%{
        transform: rotate(0deg)  translateX(4px) ;   
    }
}