@keyframes coffee {
    0%   {transform: translate(8px, 1px);}
    25%   {transform: translate(-5px, 4px);}
    50%   {transform: translate(0px, -4px);}
    75%   {transform: translate(2px, 3px);}
    100% {transform: translate(8px, 1px);}
}

#coffee {
    animation: coffee 0.5s infinite linear;
}

#ego {
  transform: scale(0.75);
  transition: transform 1s;
}

#ego:hover {
  transition: transform 600s;
  transform: scale(400);
}

#roll {
  transform: rotate(0deg);
  transition: transform 3s;
}

#roll::after {
  content: 'do a barrel roll!';
}

#roll:active {
  color: white;
  transform: rotate(360deg);
}

#roll:active::after {
  content: 'erm actually it is called an aileron roll';
}