CSSスケール変換の容易さが機能しない

Question

私はブログのアイコン上でこのスケール変換を行いたいと思っていました。そして、イージー・インは適切に機能していますが、簡単にはできません。私はいくつかのものを読んでいますが、どれもスケール・トランジションではありませんので、私はそれを私のケースに適用するのに苦労していました.. 私に感謝 を助けるここに私のコードです：

#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>

Answer 1

やすアウトの移行を有効にするには

#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>