html鼠标经过时面板翻转,悬停后如何在鼠标移出时反转动画

创建反向动画有点像解决一个简单的问题，您需要的是

animation-direction: reverse

但这不能单独工作，因为动画规格是如此转储，以至于他们忘记了添加重新启动动画的方法，因此这是在js的帮助下完成的方法

let item = document.querySelector('.item')

// play normal

item.addEventListener('mouseover', () => {

item.classList.add('active')

})

// play in reverse

item.addEventListener('mouseout', () => {

item.style.opacity = 0 // avoid showing the init style while switching the 'active' class

item.classList.add('in-active')

item.classList.remove('active')

// force dom update

setTimeout(() => {

item.classList.add('active')

item.style.opacity = ''

}, 5)

item.addEventListener('animationend', onanimationend)

})

function onanimationend() {

item.classList.remove('active', 'in-active')

item.removeEventListener('animationend', onanimationend)

}

@keyframes spin {

0% {

transform: rotateY(0deg);

}

100% {

transform: rotateY(180deg);

}

}

div {

background: black;

padding: 1rem;

display: inline-block;

}

.item {

/* because span cant be animated */

display: block;

color: yellow;

font-size: 2rem;

}

.item.active {

animation: spin 1s forwards;

animation-timing-function: ease-in-out;

}

.item.in-active {

animation-direction: reverse;

}

ABC