jquery - CSS 过渡不适用于图像

Question

我已经为 div 元素创建了一个有效的过渡，但是，当我尝试将完全相同的方法应用于图像类时，它不起作用。它不是平稳地向左移动，而是向左跳。旋转变换动画有效，但左转动画无效。

.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;
}

我不明白为什么轮换有效但过渡无效。我怎样才能使动画工作？如果有人感兴趣，我正在通过 JQuery 调用它

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

Answer 1

您的图像必须具有“左”的初始值

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