CSS TranslateY导致项目旋转

Question

我尝试在页面加载后使元素向下移动并淡入淡出。这是我的HTML：

<h1 class="home-title animate">Hello</h1>

我的CSS：

h1 {
font-family: 'Sentinel A', 'Sentinel B', sans-serif!important;
font-weight: 300;
text-transform: inherit;
color: #2e2e2e;
margin-top: 100px;
font-size: 4rem;
line-height: 1.2;
margin: 2rem 0 2.5rem;
}

.home-title {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-delay: .9s;
animation-delay: .9s;
}
.animate {
-webkit-animation-name: animate;
animation-name: animate;
}
@-webkit-keyframes animate {
0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
}
100% {
    opacity: 1;
    -webkit-transform: translateY(0);
}
}
@keyframes animate {
0% {
    opacity: 0;
    transform: translateY(-40px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}

这似乎在codepen中正常工作，但是当它在我的网站上时，单词以1不透明度开始并旋转90度，因此单词的开头指向屏幕顶部然后动画停止。