CSS, mehrere Transitions?

Hallo, wie kann ich, wenn ich einen Button habe, auf dem ich die Opacity in der Pseudoklasse Hover in einer Transition von 2ms ändern möchte, die Opacity von der Pseudoklasse Active in einer anderen Transitionzeit ändern? Wenn ich transition: opacity 2ms schreibe, wird das sowohl für hover als auch active angewendet, aber ich möchte jeweils unterschiedliche Transitionzeiten haben. Also auf active z.B. 1ms. Ich kann die Transition auch nicht in die jeweilige Pseudoklasse schreiben, da die Transition aufhört, sobald man beispielsweise vom Button runterhovert.

Answer 1

[regex9]

Du kannst eine Animation für den :active-Zustand verwenden.

Beispiel:

button > span {
  opacity: 1;
  transition: 5s opacity;
}

button:hover > span {
  opacity: 0;
}

button:active > span {
  animation: 1s hide-out forwards;
}

@keyframes hide-out {
  from {
    opacity: 1;
  }
  to {
   opacity: 0;
  }
}

Comments

[Opber34]

Danke dir