jquery - CSS过渡不适用于图像

我为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");

最佳答案

您的图片必须具有“ left”的初始值

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

关于jquery - CSS过渡不适用于图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40664705/