javascript - CSS类的对面

Question

我正在处理我需要构建 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>