Css转换不是线性的

Question

我试图在图像悬停后实现一些漂亮的转换效果（将鼠标悬停在与鼠标相同的方向上）。

一切工作正常，除了“悬停在”过渡不是直线，但更像是一个对角线&填充的方式（在下面的例子中，过渡是从左：-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> 

我想要的运动是在一条直线上，如悬停出过渡哪些工作精细。你能指出我的错误吗？

这是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; 
} 

答： OK我看着办吧 - 那是因为是在slideFromLeft后添加上悬停initial_hover类。一旦我扭转这些它的作品，因为我的预期

Answer 1

它不是线性的，因为它被指定为非线性。如果您想要进行线性转换，则应在.hover_effect的样式中将ease-in-out和ease更改为linear。