Internet explorer IE动画顶部不工作

我有一个响应性的rectagnle div，里面有一个div，initail属性为 100%的绝对位置和顶部位置

当鼠标悬停时，我希望内部div从前100%更改为前0px，我在做一个转换 （注意

转换：前2名
）

出于某种原因，这段代码在chrome上运行得很好，但对于IE来说，过渡并没有很好地进行，div立即占据0px的顶部，并且没有动画效果

IE在将顶部位置动画设置为0时有问题吗

<div class="col-xs-6 col-md-4 pull-right" data-projects-dir53="1" style="display: block;">            
            <div class="projectBox" style="background-image:url('/Warehouse/content/pics/pic_250_A.jpg');">
                <div data-toggle="ajaxModal" data-target="#myModal" onclick="LoadProjectData(250);">
                    <div class="s-vert-parent text-center">
                        <div class="child-vert box-text-contain">
                            <h3>שתי דקות</h3>
                            <p class="hidden-xs"></p>
                            <a class="open-plus-icon" data-toggle="ajaxModal" data-target="#myModal" onclick="LoadProjectData(250);"><img alt="פלוס" src="../../../000Frames/site/images/plus_icon.png"></a>
                        </div>   
                    </div>         
                </div>
            </div>
        </div>

请删除所有
我试图复制/粘贴您的代码，但它甚至没有显示。看起来有一些损坏的HTML。
.projectBox > div {
display:block; 
position:absolute;
top:100%; 
right:0px;
left:0px;
padding-bottom:67%; 
-webkit-transition: top 1s; 
transition: top 1s; 
color:White; 
width:100%; 
height:100%; 
background-color:RGBA(239,65,61,0.9); 
}
.projectBox:hover > div , .projectBox:focus > div { top:0px; right:0px; left:0px; bottom:0px; }