如何给不规则背景图片按钮加上动画效果

html代码

<div className={styles.ground}><span className={`${styles.circle} ${show?styles.explodeCircle:''}`}style={show?{left:'120px'}:{top:'108px'}}/><img src={img} onMouseOver={()=>{this.setState({show:true})}} onMouseLeave={()=>{this.setState({show:false})}}/>
</div>

css代码

.ground{width:153px;left:-47px;z-index:-1;top:0;transition: all 0.5s ease;.explodeCircle{width:200px;height:120px;transform:skew(130deg);margin:50px auto;animation:explode .7s forwardslz-index:10}.circle{position:absolute;top:-50px;left:0;right:0;bottom:0;z-index:100;margin-left:-500px;margin-top:-300px;pointer-events:none;}img{width:153px;transition:400ms;z-index:10000;}
}
@keyframes explode{0%{width:0;height:0;margin-left:-500px;margin-top:-300px;background:rgba(49,255,249,0.1)}
100%{width:112px;height:85px;transfrom:skew(130deg,-3deg);margin-left:-500px;margin-top:-300px;background:rgba(49,255,249,0.1)}
}