Opacity transition does not work in both directions

Question

I expected this to happen upon entering and exiting the darkened state, but upon transition it only goes over. How can I make a transition as I type? I also tried ease-inand ease-out, but they don't seem to matter.

.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
    opacity: .5;
    transition: opacity .5s ease-in-out;
}

Live example of the problem http://codepen.io/ryanve/pen/doKdgW

Answer 1

Since you need to define transitionon .card:

.card {
  transition: opacity .5s ease-in-out;
}

Instead of this:

.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
  transition: opacity .5s ease-in-out;
}

Answer 2

Change css to this:

.is-dimmed-unless-active {
  transition: opacity .5s ease-in-out;
  opacity: 1;
}
.is-dimmed-unless-active:hover {
    opacity: .5;
}

.card {
  width: 60%;
  margin: 1em auto;
  padding: 1em;
  color: crimson;
  border: 3px dotted crimson;
}

body {
  font-family: sans-serif;
  background: white;
}