简单的CSS动画-可以使用不透明度，但不能翻译Y

Question

我正在尝试在页面加载时对按钮进行动画处理。

不透明度起作用，但是translateY不起作用。 我在按钮上添加了“ btn.animate”类。 如果我从“ a”标签中删除该类，然后将其添加到父按钮（div）中，则translateY可以工作。 我尝试创建另一支笔，并注释掉一些代码以磨练该问题。有人可以指出我可能犯的任何错误吗？

link to codepen

我希望按钮在淡入时向上移动。 该按钮确实会淡入，但不会向上移动。

@keyframes FadeInFromTheBottom {
 0% {
   opacity: 0;
   transform: translateY(40px);
  }

 100% {
   opacity: 1;
   transform: translateY(0);
  }
}

.btn-animated {
 animation: FadeInFromTheBottom 2s ease-out .75s;
}