HTML图片在div中心旋转+变色 鼠标移除后 慢慢恢复原样

<style>
.divz {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}

.div1 {
width: 500px;
height: 500px;
background-color: blue;
}

.div2 {
width: 50px;
height: 50px;
position: absolute;
display: none;
top: 48%;
left: 45%;
height: 50px;
transition: 2s;
/*transform: rotate(180deg);*/
animation: me 2s;
}

.divz:hover .div2 {
display: block;
}

@keyframes me {
from {}
to {
transform: rotate(360deg);           background-color: #000000;
}
}
</style>

<div class="divz">
<div class="div1"></div>
<div class="div2">
<img src="img/Cutter_2017-11-30 08_29_58.287.png" width="50px" height="50px">
</div>
</div>