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

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-fade-to-right {
  0% {
    position: relative;
    left: 0;
    opacity: 1;
  }

  40% {
    position: relative;
    opacity: 0;
  }

  50% {
    position: relative;
    left: 150%;
    opacity: 0;
  }

  60% {
    position: relative;
    right: 150%;
    opacity: 0;
  }

  100% {
    position: relative;
    right: 0;
    opacity: 1;
  }
}

@keyframes rotate-fade-to-right-out {
  from {
    position: relative;
    left: 0;
    opacity: 1;
  }  

  to {
    position: relative;
    left: 150%;
    opacity: 0;
  }
}

@keyframes rotate-fade-to-right-in {
  from {
    position: relative;
    right: 150%;
    opacity: 0;
  }

  to {
    position: relative;
    right: 0;
    opacity: 1;
  }
}

@keyframes rotate-fade-to-left{
  0% {
    position: relative;
    right: 0;
    opacity: 1;
  }

  40% {
    position: relative;
    opacity: 0;
  }

  50% {
    position: relative;
    right: 150%;
    opacity: 0;
  }

  55% {
    position: relative;
    left: 150%;
    opacity: 0;
  }

  100% {
    position: relative;
    left: 0;
    opacity: 1;
  }
}

@keyframes rotate-fade-to-left-out {
  from {
    position: relative;
    right: 0;
    opacity: 1;
  }

  to {
    position: relative;
    right: 150%;
    opacity: 0;
  }  
}

@keyframes rotate-fade-to-left-in {
  from {
    position: relative;
    left: 150%;
    opacity: 0;
  }

  to {
    position: relative;
    left: 0;
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}