css - CSS过渡不是线性的

我想在将鼠标悬停在图像后时实现一些不错的过渡效果。（悬停div的显示方向与鼠标的方向相同）。

一切工作正常，只是“悬停”过渡不是直线，而是更像是对角线和填充的方式。（在下面的示例中，过渡是从左：-378px；到左：0px /顶部为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;
}

答：
好的，我知道了-这是因为在悬停中slideFromLeft之后添加了initial_hover类。一旦我扭转了这些，它就会按预期工作

最佳答案

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

关于css - CSS过渡不是线性的，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14854669/