web-dev-qa-db-fra.com

Déclencher l'animation sur le clic d'élément en CSS pur

Disons que j'ai un élément simple:

<a href="#" id="btn" onclick="return false">Click</a>

Maintenant, je peux changer l'apparence de cet élément en cliquant sur :active:

#btn:active {
    background: red;
}

Ce que j'aimerais cependant, c'est que l'élément reste rouge pendant environ une seconde après que j'ai cliqué dessus sans modifier le HTML (donc pas de hack de case à cocher) ou javascript. Y a-t-il une astuce intelligente dont on peut abuser pour cela?

JsFiddle ici

csscss-transitions
13
Jan Jongboom

Répondre à ma propre question. En abusant du :not pseudo-classe, nous pouvons déclencher une animation après un onclick:

#btn:not(:active) {
    /* now keep red background for 1s */
    transition: background-color 1000ms step-end;
}

#btn:active {
    background: red;
}
36
Jan Jongboom

Vous pouvez utiliser CSS3 animations et déclencher avec le :focus & :active...
Maintenant, vous pouvez activer l'effet en appuyant simplement sur la touche TAB clé...

Mais si vous devez l'activer avec un mouse click.... et dans un a tag vous devez définir le focus sur l'objet, donc javascript est requis. (en ligne dans ce cas)

Si vous pouvez utiliser un autre objet, disons un input type="text" puis le focus il est automatiquement défini lorsque vous effectuez le click, mais dans ce cas l'action focus est donnée par le navigateur.

Ainsi, le JS en ligne requis est: 

<a href="#" id="btn" onclick="this.focus();return false">Click</a>

Et le code CSS3

#btn {
    background: yellow;
}

#btn:focus, #btn:active {
    -webkit-animation: btn-color 1s forwards linear;
    -moz-animation: btn-color 1s forwards linear;
    -ms-animation: btn-color 1s forwards linear;
    -o-animation: btn-color 1s forwards linear;
    animation: btn-color 1s forwards linear;
}

@-webkit-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-moz-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-ms-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-o-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }

Voir une mise à jour de violon qui fonctionne: http://jsfiddle.net/s3G7p/1/

3
gmo