- Add a highlighted state animation and set it to a button:
.button {
background-color: green;
}
.button:highlighted {
animation-name: highlight;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@Keyframes highlight {
from { background-color: yellow; }
to { background-color: red; }
}
- Play the animation by touching the button.
- Touch up before the animation ends. The button will remain in some undetermined state. The correct behavior is to reset its background to green (like in iOS).
.button {
background-color: green;
}
.button:highlighted {
animation-name: highlight;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@Keyframes highlight {
from { background-color: yellow; }
to { background-color: red; }
}