Usando Transiciones Infinitas para Activar Estados

CSS3 Logo

Este código muestra un ejemplo de usar transiciones infinitas en los delays, para cambiar el color de texto de un párrafo, cuando se pulsa uno de los botones, se sobrescribe la propiedad de transición para eliminar el retraso, por lo que pueden cambiar el color, cualquier cambio en la propiedad de color será un retraso de aproximadamente 116 días. Aquí se muestra con la propiedad active en los botones para un ejemplo básico.

El HTML
[html]
<button class="red">Red</button>
<button class="green">Green</button>
<button class="blue">Blue</button>

<p>This text will only have the color while the button is pressed down.</p>
<p class="perm">
This text will keep the given color even after the button is released.
<p>
[/html]

El CSS
[css]
/* haciendo un delay largo para el cambio */
p.perm {
transition: color 0 9999999s;
}
.red:active ~ p.perm, .green:active ~ p.perm, .blue:active ~ p.perm {
transition: color 0;
}
.red:active ~ p {
color: red;
}
.green:active ~ p {
color: green;
}
.blue:active ~ p {
color: blue;
}
[/css]

Ten en cuenta que este es un truco muy sucio para conseguir algo con CSS que idealmente, se debe hacer con JavaScript.
Recomendado