CSS动画结束后如何实现鼠标悬停时文本重新显示？

刚接触编程，正在制作一个趣味网站，给class为txt1的元素添加了CSS动画，动画结束后文本会淡出至透明。希望动画结束后，仅当鼠标悬停在该元素区域时文本重新显示。目前动画播放正常，但鼠标悬停无反应。

现有代码 #

CSS代码 #

.txt1{
    display: inline-flex;
    width: 20vw;
    text-align: left;
    float: right;
    margin-top: 15vh;
    margin-right: 15vw;

    font-size: 1.2em;
    
    opacity: 0;
    animation: fade-in-txt1 10s ease-in .5s forwards;
    transition: opacity 0.3s ease-in;
}

.txt1:hover{
    animation-play-state: paused !important;
    opacity: 1 !important;

}

@keyframes fade-in-txt1{
    0% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 1;}
    85% {opacity: 1;}
    100% {opacity: 0;}
}

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="home-page-cs.css">
    <title>Home</title>
</head>
<body>
    <div class="bck-img">
        <p class="txt1">Hello.</p>
    </div>
        <p class="home-text">You have come Home</p>
</body>
</html>

问题原因 #

动画使用了forwards属性，会让元素在动画结束后强制保持最后一帧的样式（opacity: 0），且CSS动画的样式优先级高于普通伪类选择器，哪怕加了!important也无法覆盖动画锁定的状态。

解决方案 #

方法1：JS配合移除动画（推荐） #

通过监听动画结束事件，移除元素的动画属性，让hover样式正常生效：

修改HTML，添加脚本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="home-page-cs.css">
    <title>Home</title>
</head>
<body>
    <div class="bck-img">
        <p class="txt1">Hello.</p>
    </div>
    <p class="home-text">You have come Home</p>
    <script>
        const txtElement = document.querySelector('.txt1');
        txtElement.addEventListener('animationend', function() {
            this.style.animation = 'none';
        });
    </script>
</body>
</html>

调整CSS的hover样式，去掉无效的动画暂停属性：

.txt1:hover{
    opacity: 1;
}

方法2：类控制动画（更清晰） #

通过类来管理动画的开启和关闭，动画结束后移除动画类：

修改CSS：

.txt1{
    display: inline-flex;
    width: 20vw;
    text-align: left;
    float: right;
    margin-top: 15vh;
    margin-right: 15vw;

    font-size: 1.2em;
    
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.txt1.animate {
    animation: fade-in-txt1 10s ease-in .5s forwards;
}

.txt1:hover{
    opacity: 1;
}

@keyframes fade-in-txt1{
    0% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 1;}
    85% {opacity: 1;}
    100% {opacity: 0;}
}

修改HTML，添加动画类和脚本：

<div class="bck-img">
    <p class="txt1 animate">Hello.</p>
</div>
<script>
    const txtElement = document.querySelector('.txt1');
    txtElement.addEventListener('animationend', function() {
        this.classList.remove('animate');
    });
</script>

内容的提问来源于stack exchange，提问作者Edd