html - 在 :hover and :active? 上具有不同效果的 CSS 动画

Question

编辑 演示在这里:http://3.cnxical.appspot.com

text-shadow 属性在悬停时发生变化，并且通过 animation-fill-mode 设置 forwards 状态保持不变。

:active 状态的动画不工作，点击标题时没有任何反应。

预期的行为是标题应该消失，因为 text-shadow 属性设置为(并且这两个都已尝试)none 或 0 0 1px透明。为 :active 设置 text-shadow 也尝试过没有动画，但没有成功。

如何才能实现正确的行为？

代码是:

            #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; }
            }

Answer 1

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

#title:hover 和#title:active 同样具体，悬停规则最后定义。

任何具有在两个规则集中指定的属性的规则，将被 :hover 规则(包括 -webkit-animation)覆盖。

重新排序您的规则集，使 :hover 规则出现在 :active 规则之前。