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

图片必须有一个left的初始值

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

Answer 2

你的代码看起来不错，你确定你把togglecclass在$(document).ready()里面吗?

try this:

$( document ).ready(function() {
    $(".firstimg").toggleClass("turnedimg");
});

Answer 3

你的代码工作了(工作演示)。

但是你必须在一个事件中调用$(".firstimg").toggleClass("turnedimg");。

例如，您可以使用$( document ).ready();或$( selector ).click();。

在这里你可以找到所有的JQuery事件。

//When page is loaded
$(document).ready(function() {
  $(".firstimg").toggleClass("turnedimg");
  
  
  //On click
  $(".firstimg").click(function() {
    $(".firstimg").toggleClass("turnedimg");
  });
});

.firstimg {
  width: 5%;
  cursor: pointer;
  position: absolute;
  width: 400px;
  height: 400px;
  -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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img class="firstimg" src="http://www.placehold.it/400/400">
<p>
Try to click the image
</p>