不透明度转换不在两个方向上

Question

我希望在进入和时离开变暗状态时会转换，但只有在离开时才会转换。如何在进入时进行过渡？我也试过了ease-in和ease-out，但这些似乎没有什么区别。

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

问题http://codepen.io/ryanve/pen/doKdgW

的实例

Answer 1

因为您需要在transition上定义.card：

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

取而代之的是：

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

Answer 2

将你改为css：

.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;
}