Css转换不是线性的

Question

我正在尝试实现一些很好的过渡效果，当悬停在图像之后。(悬停div从与鼠标相同的方向出现)。

一切都很好，除了“悬停在”的过渡不是直线，而更像是以一种对角线&填充的方式。(在下面的例子中，过渡是从左：-378px；到左: 0px / top是0)。

正常状态：

<div class="hover_effect initial_hover slideFromLeft" style="display: block;">link aici</div>

悬停状态(通过jQuery移除和添加类)：

<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>

我希望移动是在一条直线上，就像悬停出过渡，这工作得很好。你能给我指出那个bug吗？

这是html和css代码：

<div class="portfolio-sample regular-portfolio coding-2   isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px);">
<img width="455" height="295" src="http://localhost/wp-content/uploads/2013/01/env0251-455x295.jpg" class="attachment-portfolio-two wp-post-image" alt="env025">        
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
<div class="custom_slider_shadow"></div>
</div>

谢谢!

 .hover_effect{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.initial_hover{
position: absolute;
background: rgba(75,75,75,0.7);
width: 378px;
height: 245px;
top: 260px;
}

.slideFromLeft {
top: 0px; 
left: -378px;
}

.slideLeft {
left: 0px;
}   

答:好的，我想出来了--这是因为initial_hover类是在悬停的slideFromLeft之后添加的。一旦我反转了这些，它就会像我预期的那样工作。

Answer 1

它不是线性的，因为它被指定为非线性。如果需要线性过渡，则应在.hover_effect的样式中将ease-in-out和ease都更改为linear。