ashjack ashjack - 21 days ago 5
CSS Question

CSS transition not working on image

I have created a working transition for a div element, however, when I tried to apply the exact same method to an image class, it would not work. Instead of smoothly moving to the left it jumps to the left. The rotation transform animation does work, but not the left transition.

.firstimg{
width: 5%;
cursor: pointer;
position: absolute;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.turnedimg{
width: 5%;
cursor: pointer;
/*left: 12% !important;*/
position: absolute;

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}


I do not understand why the rotation works but the transition does not. How can I make the animations work? If anyone is interested, I am calling it through JQuery

$(".firstimg").toggleClass("turnedimg");

Answer

Your image must have an initial value for 'left'

.firstimg{
width: 5%;
left: 0%;
cursor: pointer;
...