Opposite of the CSS Class

Question

i am working on the req where i need to build the opposite animation of the CSS class as shown below can someone help me out for the construction below is the opposite class

.tcs-animate-right {
  position:relative;
  animation-name: animateright;
  animation-duration: 0.75s;
}

@keyframes animateright {
  from { right:-100px; opacity:0 }
  to { right:0; opacity:1 }
}

<div>
  <p class='tcs-animate-right'>tcs-animate-right</p>
</div>

Kindly help me out in order to animate the field in the opposite direction as shown in the above.

Answer 1

Its quite simple. Just copy / paste your code and renamte it a bit. Then just change -100px to 100px

.tcs-animate-right {
  position:relative;
  animation-name: animateright;
  animation-duration: 0.75s;
}
.tcs-animate-left {
  position:relative;
  animation-name: animateleft;
  animation-duration: 0.75s;
}

@keyframes animateright {
  from { right:-100px; opacity:0 }
  to { right:0; opacity:1 }
}

@keyframes animateleft {
  from { right: 100px; opacity:0 }
  to { right:0; opacity:1 }
}

<div>
  <p class='tcs-animate-right'>tcs-animate-right</p>
  <p class='tcs-animate-left'>tcs-animate-left</p>
</div>