对一个元素的两个变换效果

Question

我在元素上使用Animate.css的slideInLeft效果，如下所示：

@keyframes slideInLeft {
  0% {
     opacity: 0;
     transform: translateX(-2000px);
  } 
  100% {
     transform: translateX(0);
  }
}

我也希望这个元素在滑入后垂直居中。为此，我使用样式：

position: relative;
top: 50%;
transform: translate3d(0, -50%, 0);

不幸的是，使用变换的CSS动画会干扰我的垂直对齐技术。我可以重写动画，以便它使用translate3d和＆＃34; -50％＆＃34; Y值，但这样做的问题是我不想强迫内容在小屏幕尺寸上垂直居中。

我想出的解决方案是使用Javascript来检测屏幕大小，然后确定是否添加.slideInLeft动画或.slideInLeftVC动画（.translate3d（0px，-50％，0）。这种应用技巧关于加载时间的正确动画可能在很多情况下都有效，但它似乎并不是最好的解决方案。例如，如果用户在加载页面后调整了窗口大小，他们就会得到错误的动画。我想知道是否任何人都知道使用多种变换的任何好方法。