@keyframes youpi {
    15% {transform: translate(10%, 5%);}
    25% {transform: translate(80%, 1000px);}
    50% {transform: translate(20%, 200px);}
    75% {transform: translate(40%, 500px);}
   100% {transform: translate(20px, 10%);}
   }
   
@keyframes youpiII {
     0% {opacity:0}
    15% {transform: translate(5%, 10%);}
    20% {opacity:1}
    25% {transform: translate(40%, 0px);}
    50% {transform: translate(40%, 100px);}
    75% {transform: translate(10%, 300px);}
   100% {transform: translate(20px, 10%);}
   }
   
@keyframes opa {
    from {opacity: 0;}
                
    to   {opacity: 1;} 
}
   
div#click { animation: youpi 3s;
            animation-direction: alternate;
            animation-iteration-count:infinite;
            animation-delay:2s;
            position: relative;
            display:flex;
            align-content:center;
            margin-top:100px;
            margin-left:30%;
}

div.clickII {   animation: youpiII 5s;
                animation-direction: alternate;
                animation-iteration-count:infinite;
                animation-delay:4s;
                position: relative;
                display:flex;
                align-content:center;
                margin-top:200px;
                margin-left:;
                opacity:0;
                
}

a.click {   font-family: 'Audiowide', cursive;
            text-align:center;
            font-size:30px;
}

a.clickII { font-family: 'Audiowide', cursive;
            text-align:center;
            font-size:30px;
            animation: opa 1s ease-in forwards;
            color:#DA00D3;
            
            
            
}

div#clickII {       
                    animation-delay:20s;
}



html, body {font-family: 'Audiowide', cursive;
            padding:0;
            margin:0;
            height:100%;
            
}