与translateY(-50%)垂直对齐给出一个混蛋？

Question

我如何修复下面的代码..我使用了transform:translateY(-50%)的技术使div垂直居中.但是当我将它与动画一起使用时,它首先需要top:50%它翻译给一个混蛋 ..我不希望这个混蛋发生,元素应该自动进入中心.

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

<div class="element">
  Vertical Align is Awesome!
  <br /> But with animation its giving a jerk!<br/> Please Fix
</div>

Answer 1

您的动画规则会覆盖translateY(-50%)with scale(),当动画完成后,先前的规则会再次应用,因此会跳转.

如果添加translateY(-50%)到动画中,它将正常工作.

一个侧面注释,基于是否放置translateY()之前或之后scale(),它的动画不同,因为transform值从右到左应用

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: translateY(-50%) scale(0);
  }
  to {
    -webkit-transform: translateY(-50%) scale(1);
  }
}

@keyframes zoom {
  from {
    transform: translateY(-50%) scale(0); 
  }
  to {
    transform: translateY(-50%) scale(1);
  }
}

<div class="element">
  Vertical Align is Awesome!
  <br /> But with animation its giving a jerk!<br/> Please Fix
</div>