html5 - Css transition is not linear -

html5 - Css transition is not linear -

i’m trying accomplish nice transition effects when hovering after image.(a hover div appear same direction mouse ).

everything works fine except “hover in” transition not in straight line more in diagonal & fill kind of way.(in illustration below transition left: -378px; left : 0px / top 0).

normal state:

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

hover state (classes removed , added via jquery):

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

i want motion in straight line hover out transition works fine. can point me bug ?

this html & css code:

<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>

thank you!

.hover_effect{ -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; transition: 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; }

answer : ok figure out - because initial_hover class added after slidefromleft on hover. 1 time reverse these works expected

it not linear because specified not linear. if want linear transition, should alter both ease-in-out , ease linear in styling .hover_effect.

css html5 transitions