CSS缩放过渡缓和不起作用 [英] CSS scale transition ease-out not working

问题描述

因此，我一直想在博客上的图标上进行此比例转换.而且缓入功能正常工作，但缓释功能却不行...我读了一些东西，但它们都不是关于音阶转换的，所以我一直很难将其应用于我的案子.希望你能帮我谢谢这是我的代码:

So I've been wanting to do this scale transition on an icon on a blog. And the ease-in is working properly but not the ease-out... I read some stuff but none of them are about the scale transition so I've been having a hard time applying it to my case.. Hope you can help me thanks Here's my code :

#avatar {
margin:auto;
margin-top:15px;
width:50px;
height:50px;
border-radius:60px;
border:0px solid {color:Main icon background};
z-index:10;
}
 
#avatar img {
width:100%;
height:100%;
border-radius:100%;
}

#avatar img:hover{
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;  
-ms-transform: scale(1.5, 1.5); /* IE 9 */
-webkit-transform: scale(1.5, 1.5); /* Safari */
transform: scale(1.5, 1.5);
}

<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>

推荐答案

将代码段更新为包含

#avatar img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

使过渡过渡有效.

#avatar {
  margin: auto;
  margin-top: 15px;
  width: 50px;
  height: 50px;
  border-radius: 60px;
  border:0px solid {
    color: Main icon background
  }
  ;
  z-index:10;
}

#avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

#avatar img:hover {
  -webkit-transition: all 0.7s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  -ms-transform: scale(1.5, 1.5);
  /* IE 9 */
  -webkit-transform: scale(1.5, 1.5);
  /* Safari */
  transform: scale(1.5, 1.5);
}

#avatar img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

<div id="avatar"><img src="https://us.123rf.com/450wm/valentint/valentint1503/valentint150302008/37824182-examples-icon-internet-button-on-colored-background.jpg?ver=6"></div>

这篇关于CSS缩放过渡缓和不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！