为什么我在悬停时无法设置持续时间

Question

我在图像上有缩放比例，并设置悬停持续时间为5秒，但是当我从图像移动鼠标时，我的图像不会缓解5秒的持续时间，我想你理解我。

http://jsfiddle.net/oqa88vdo/ HTML

<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">

CSS

img{
 width:150px

}
img:hover{
     transform: scale(2,3);
     transition: transform 1500ms ease;
}

我试着设定 过渡：500ms缓解1s;但没有工作

Answer 1

您需要将转换应用于元素本身，而不是：hover psuedo-class：

img {
   width:150px;
   transition: transform 1500ms ease-in-out;
}

img:hover{
     transform: scale(2,3);
}

请参阅：http://jsfiddle.net/oqa88vdo/3/

这背后的原因是CSS转换定义了如何对元素进行更改。首先在元素上设置转换行为，然后任何更改的CSS都将使用该转换行为。

developer guides at Mozilla cover this very well，值得一读。

Answer 2

您还需要在非悬停样式中设置参数，如下所示：

https://jsfiddle.net/oqa88vdo/

img{
   width:150px;
   transform: scale(1,1); 
    transition:transform 1500ms ease;
        
}
img:hover{
     transform: scale(2,3);
     transition: transform 1500ms ease;
}

<img src="http://spmhire.com/wp-content/uploads/2014/11/rolls-royce.jpg">