@keyframes fun {
    from {color: red;}
    to {color: yellow;}
  }
    
  @keyframes fun2 {
    from {color: blue;}
    to {color: pink;}
  }

  @keyframes fun3 {
    from {color: green; transform: rotate(-20deg);}
    to {color: white; transform: rotate(20deg);}
  }

  @keyframes fun4 {
    from {transform: rotate(-40deg);}
    from {transform: rotate(40deg);}
  }

  @keyframes fun5 {
    from {transform: translateX(0px);}
    to {transform: translateX(100vw);}
  }

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

  @keyframes fun7 {
    from {font-size: 400px;}
    to {font-size: 4000px; color: lightcoral;}
  }
  
  @keyframes nuf {
    from {font-size: 10px;}
    to {font-size: 400px;}
  }

  @keyframes colors {
    0% { color: red;}
    15% { color: orange; }
    30% { color: yellow; }
    45% { color: green; }
    60% { color: blue; }
    75% { color: indigo; }
    100% { color: violet; }
  }

  @keyframes fun8 {
    from { font-size: 5px; }
    to { font-size: 550px;}
  }

.fun,
.fun2,
.fun3,
.fun4 {
    position: relative;
    margin: 0px;
    font-size: 50vh;
    animation-name: fun;
    animation-duration: .05s;
    text-shadow: 2px 3px black;
    animation-iteration-count: infinite;
    transform: rotate(180deg) translate(150px);
    z-index: 1;
}

.fun2 {
    margin-top: -1rem;
    animation-name: fun2;
    transform: rotate(-20deg);
}

.fun3 {
    margin-top: -500px;
    animation-name: fun3;
    transform: rotate(-20deg);
}

.fun4 {
    transform: rotate(-20deg);
    font-size: 75vh;
    animation: fun4 2s infinite alternate-reverse ease-in-out;
    top: 30%;
    position: absolute;
    font-weight: bold;
    z-index: -1;
    color: red;
    font-family: Arial, Helvetica, sans-serif;
}

.fun5 {
    position: absolute;
    top: 50%;
    animation: fun5 infinite alternate linear 1s;
    font-weight: bold;
    z-index: -2;
}

.fun6 {
    position: fixed;
    top: 15%;
    font-size: 200px;
    font-weight: 600;
    border: 5px solid pink;
}

body {
    height: 200vh;
    background-color: rgba(255, 17, 160, 0.56);
    border: dashed 10px orange;
}

.bad {
    position: absolute;
    animation: bad infinite linear 3s;
    color: teal;
}

.fun7 {
    position: absolute;
    top: 50%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    animation: fun7 .5s infinite alternate ease-in-out;
}

.nuf { 
    position: absolute;
    top: 50px;
    animation: nuf 1s infinite alternate-reverse, colors .15s infinite alternate-reverse;
    z-index: 2;
}

.fun8 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 5px;
    font-weight: 600;
    margin: 0px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
    opacity: .5;
    animation: fun8 8s infinite alternate;
}