如何通过CSS3设置悬停效果的动画

我通过悬停效果调整图像大小，如下所示

<img id="image" src="https://www.google.com/images/srpr/logo11w.png" align="middle" alt="Img1"/>

#image{
    height:50px;
    -webkit-transition: height 2s;
    transition: height 2s;
}

#image:hover{
    height:100%;
}

#形象{
高度：50px；
-webkit转换：高度2s；
过渡：高度2s；
}
#图片：悬停{
身高：100%；
}

---

我应该如何调整代码以使转换具有渐进的动画效果？

我认为您需要CSS的转换。试着这样做：

#image{
    height:50px;
    transition: height 2s; // specify property and duration
}

#image:hover {
    max-height: 500px; // new height
    transition: linear; // evenly timed transition
}

尝试缩放转换：

CSS:

---

演示：

首先，当您尝试对图像的

宽度应用平滑过渡时，您仅对图像应用了
高度
值。使用
height
或
all
进行转换

其次，尝试使新图像高度
100%
。现在，100%什么？以像素为单位指定固定高度，或将其放置在具有固定高度的容器中

因此，你可以：


#图像{
高度：50px；
-webkit转换：高度2s；/*Safari*/
过渡：高度2s；
}
#图片：悬停{
高度：100px；/*以像素等固定单位设置的高度*/
}
height 100%只会在其父元素使用
px、em等具有固定大小时增加元素高度。与
%相反，vwh
您还可以查看
jQuery的animate（）
。我发现它适用于各种动画——你的解决方案在悬停后保持大小调整格式0.25秒。我想动画的过程中调整大小。哈哈，对不起。我很困惑-这是漫长的一天：）我会在一个moIt中进行更新，做我想做的，但是转换创建了一个绝对位置。然后，正如你在小提琴中看到的那样，图像在画面之外。
#image {
  height: 50px;
  transition: all 0.2s;
}

#image:hover {
  transform: scale(2);//Can be any value
  transition: all 0.2s height: auto;
}