CSS3单向过渡？

使用CSS3转换，可以对任何属性进行“平滑”和“平滑”效果。

我可以设置只有“平滑”的效果？ 我希望解决scheme只在CSS中，如果可能的话，避免使用JavaScript。

逻辑stream程：

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

我想要的是：

• 用户点击元素
• 转换需要更改0
• 用户放开鼠标button
• 转换需要0.5s来改变…

没有“过渡期”，但是有一个“过渡期”。

Answer 1

我尝试了CSS3 Tryit编辑器中的以下内容，它在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!">