CSS3单向转换？

Question

使用CSS3过渡,可以对任何属性进行"平滑上升"和"平滑下降"效果.

我可以将其设置为仅具有"平滑"效果吗？我希望解决方案只在CSS中,如果可能的话,避免使用JavaScript.

逻辑流程:

• 用户点击元素
• 转换需要0.5秒才能将背景颜色从白色变为黑色
• 用户放开鼠标左键
• 过渡需要0.5秒才能将背景颜色从黑色变为白色

我想要的是:

• 用户点击元素
• 转换需要0才能改变
• 用户放开鼠标按钮
• 过渡需要0.5秒才能改变......

没有'过渡时间',但是有一个'过渡'时间.

Answer 1

我在CSS3 Tryit Editor中尝试了以下内容,它在Chrome(12.0.742.60 beta-m)中运行.

/* transition out, on mouseup, to white, 0.5s */
input
{
  background:white;
  -webkit-transition:background 0.5s;
  -moz-transition:background 0.5s;
  -ms-transition:background 0.5s;
  -o-transition:background 0.5s;
  transition:background 0.5s;
}

/* transition in, on click, to black, 0s */
input:active
{
  background:black;
  -webkit-transition:background 0s;
  -moz-transition:background 0s;
  -ms-transition:background 0s;
  -o-transition:background 0s;
  transition:background 0s;
}

<input type="button" value="click me to see the transition effect!">

Answer 2

使用“transition:none”也有效：

div{
  background: tomato;
  transition: background 0.3s ease-in;
}
div:active{
  background: blue;
  transition: none;
}

<div>click me</div>