Html 在：悬停和：活动上具有不同效果的CSS动画？

编辑演示如下：

悬停时，

text shadow

属性会更改，使用

animation fill mode

set

forwards

状态会持续

“活动”状态的动画不工作，单击标题时不会发生任何事情

预期的行为是标题应该消失，因为

文本阴影

属性设置为（并且两个属性都已尝试过）

none

或

0 1px transparent

。设置

text shadow

for:active也在没有动画的情况下进行了尝试，但它不起作用

如何才能实现正确的行为

代码是：

            #title {
                position:absolute;
                cursor:pointer;
                text-align:center;
                top:15%;
                left:50%;
                -webkit-transform:translate(-50%,-50%);
                color:transparent;
                text-shadow:0 0 10px lime;
                font-size:5vmin;
                font-weight:bold;
                font-family:"Courier New",Courier,monospace;
                -webkit-animation: push_title_focus 0.3s;
            }
            #title:active {
                -webkit-user-select:none;
                -webkit-animation: vanish_title 0.3s;   
            }
            #title:hover {
                -webkit-animation: pull_title_focus 0.3s;
                -webkit-animation-fill-mode: forwards;
            }
            @-webkit-keyframes pull_title_focus {
                from { text-shadow: 0 0 10px lime; }
                to { text-shadow: 0 0 1px lime; }
            }
            @-webkit-keyframes push_title_focus {
                from { text-shadow: 0 0 1px lime; }
                to { text-shadow: 0 0 10px lime; }
            }
            @-webkit-keyframes vanish_title {
                from { text-shadow: 0 0 1px lime; }
                to { text-shadow: none !important; }
            }

---

当按下鼠标按钮激活链接时，鼠标仍指向链接，因此它仍处于悬停状态

#title:hover

和

#title:active

同样具体，悬停规则最后定义

具有两个规则集中指定的属性的任何规则都将被

：hover

规则覆盖（包括

-webkit动画

）

---

重新排列规则集，使

：hover

规则出现在

：active

规则之前。

单击标题时，它不应该是#标题：焦点吗？我一直认为焦点是选项卡焦点，只是单击时的副作用。活动用于单击。你怎么看？我想我错了——只是在小提琴上试了一下，结果不起作用。然而，你现在有了正确的答案：o）是的，这是针对制表符焦点的。如果你通过标签，元素是可标签的：焦点状态将工作。太棒了！很有效，谢谢。接受。但是，如果说hover只是一个触发动画的事件，那么对于CSS来说，元素并没有被悬停，这不是更正确吗。仅因为填充模式为“向前”，悬停触发动画后该状态才会持续。你认为呢？好的，对于没有填充模式前进的WebKit动画，动画结束状态不会持续，这表明鼠标悬停时有一个事件。你怎么认为？