@keyframes cardPrevious {
  0% {
    transform: translateX(0%) scale(1) translateZ(0);
    z-index: 2;
    opacity: 1;
  }
  50% {
    transform: translateX(-95%) scale(1) translateZ(0);
  }
  90% {
    transform: translateX(-2%) scale(0.98);
    z-index: 1;
    opacity: .3;
  }
}

/*

    span.question_holder{
      display: block;
      width:100%;
      position:absolute;
      left:0%; 
    &.next{
      transform: translateX(100%);
     transition:transform .4s .6s ease;
      
    } 
      &.previous{
      transform: translateX(-100%);
       transition:transform .4s .6s ease;
    }  

    &.active, &.first {
      transform: translateX(0%);
    }
      
      &.active{
       //transition:transform .4s .2s ease; 
      }
      &.first{
        //transition:transform 0s 0s linear;
      }
  } 
*/

span.question_holder,
span.reaction_holder {
  display: block;
  width: 100%;
  position: absolute;
  left: 0%;
  transform: translateX(100%);
  transition: transform .4s .4s ease, position 0s 1.2s;
  /* &.active ~ &, &.active ~ &.answered, &.ready, &.first{
      transform: translateX(100%);
      transition:transform .4s .6s ease;
      
    } 
      
    &.active, &.active.answered, &.active.ready{
      transform: none; 
      position:relative;      
    }
      
      
      &.active{
         transition:transform .4s .6s ease, position 0s 1.2s;
      }
       &.active.answered, &.active.ready{
      transition:transform .4s .6s ease, position 0s 1.2s;
    }*/
}

span.question_holder.active~span.question_holder,
span.question_holder.active~span.reaction_holder,
span.reaction_holder.active~span.question_holder,
span.reaction_holder.active~span.reaction_holder {
  transform: translateX(100%);
}

span.question_holder.answered,
span.reaction_holder.answered {
  transform: translateX(-100%);
}

span.question_holder.active,
span.reaction_holder.active {
  transform: translateX(0%);
  position: relative;
}