Css转换非常不稳定

我只是不知道为什么这些转变如此缓慢。我以前从未有过这种情况发生在我身上。 我的代码是：

 <section class='containgrid'>
    <div class="grid">         
      <div class="unit one-third">
        <div class="eventbox">
                 <img class='imgfit' src='images/choice1.jpg'/>               
        <h2 class='contactheading'>Questions?</h2>
        <h3 id='subheading'>subheading</h3>         
            </div>     
     </div>
     </div>
          </section> 

---

这对我来说似乎非常简单，但当我在浏览器中打开它时，它会变得非常迟钝，一点也不平滑。为什么？

我将上述内容放在JSFIDLE中&它在Chrome和Firefox中都很适合我。过渡将平滑地设置动画。也许是关于网格框架或其他依赖关系的一些东西？动画无论使用哪种技术，在执行它们的机器上都是不必要的。确保你有最新的硬件和驱动程序，也可以尝试不同的浏览器。我的电脑绝对足够好，可以进行像这些clevo w230st这样的转换。我将看看删除其他元素是否可以提高响应OK。。。多次刷新后。。。我发现有时候当你刷新css的时候速度很快，而另一些时候速度很慢，这意味着什么呢？

.imgfit{
    width:98%;
    margin:.2em;
    height:375px;
}
.eventbox{
    background-color:#F1EFEF;
    margin-top:15%;
    width:100%;
    -webkit-transition: background-color 0.3s;
    -moz-transition:  background-color 0.3s;
    transition:  background-color 0.3s;
    -webkit-transition: border 0.3s;
    -moz-transition:  border 0.3s;
    transition:  border 0.3s;
    border:solid #F1EFEF .2em;
}
.eventbox:hover{
    background-color:#DBDBDB;
    border:solid #7D7D7D .2em;

}