В отличие от класса CSS

Question

Я работаю над req, где мне нужно создать противоположную анимацию класса CSS, как показано ниже, может ли кто-нибудь помочь мне в построении ниже, это противоположный класс

.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>

Пожалуйста, помогите мне оживить поле в противоположном направлении, как показано выше.

Answer 1

Это довольно просто. Просто скопируйте / вставьте свой код и немного переименуйте его. Затем просто измените -100px на 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>

Answer 2

можно сделать примерно так:

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

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

.tcs-animate-opposite {
  position: relative;
  animation-name: animateopposite;
  animation-duration: 0.75s;
  right: -100px;
}

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

<div class="tcs-animate-right">

  From Right To Left
</div>

<div class="tcs-animate-opposite">

  From Left To Right
</div>