纯 css 实现 mouseleave

需求：实现一个鼠标移入 icon 旋转 90deg, 鼠标移出 icon 回到原位

<span class="el-icon el-icon-close"></span>

首先定义两组动画

@keyframes spawn-ninety {  /* 顺时针旋转 90 deg */
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(90deg);
	}
}

@keyframes spawn-ninety-reverse {  /* 逆时针旋转 90 deg */
	0% {
		transform: rotate(90deg);
	}
	100% {
		transform: rotate(0);
	}
}

---

方法一

.el-icon-close {
  animation: spawn-ninety-reverse .2s;
}

.el-icon-close:hover{
	animation: spawn-ninety .2s;
}

---

方法二

.el-icon-close:hover{
	animation: spawn-ninety .2s;
}
.el-icon-close:not(:hover){
	animation: spawn-ninety-reverse .2s;
}