CSS转换在媒体查询中不起作用

Question

使用CSS转换，但在尝试自定义媒体查询时，它不再转换。只需在没有动画的情况下在完成位置渲染。

.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
top:9rem;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(125px);
-ms-transform: translateY(125px);
transform: translateY(125px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
.hovereffect h2 {
top:1rem !important;
-webkit-transform: translateY(50px) !important;
-ms-transform: translateY(50px) !important;
transform: translateY(50px) !important;
}

}

所有其他媒体查询按预期工作。