CODEWITHSUNDEEP
htmlcss
Cris
Cris

Reputation: 451

CSS animation with different effects on :hover and :active?

EDIT Demo is here : http://3.cnxical.appspot.com

The text-shadow property changes on hover, and with animation-fill-mode set forwards the state persists.

The animation for the :active state does not work, and nothing happens when the title is clicked.

The expected behaviour is the title should disappear because the text-shadow property was set to (and both of these were tried) none or 0 0 1px transparent. Setting text-shadow for :active was also tried without an animation and it did not work.

How can the correct behaviour be achieved?

The code is :

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

Upvotes: 2

Views: 1100

Answers (1)

Quentin
Quentin

Reputation: 943585

When you press the mouse button down to activate the link, the mouse is still pointing to it, so it is still being hovered.

#title:hover and #title:active are equally specific, and the hover rule is defined last.

Any rules with properties that are specified in both rule-sets, will be overridden by the :hover rule (including -webkit-animation).

Reorder your rulesets so the :hover rule appears before the :active rule.

Upvotes: 3

Related Questions