Html CSS3单向过渡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6092239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 one-way transition?
提问by Abhishek
Using CSS3 transitions, it's possible to have a 'smooth up' and 'smooth down' effect to whatever property.
使用 CSS3 过渡，可以对任何属性产生“向上平滑”和“向下平滑”效果。
Can I have it setup to have only a 'smooth down' effect? I'd like the solution to be in CSS only, avoiding JavaScript if possible.
我可以将它设置为仅具有“平滑”效果吗？我希望解决方案仅使用 CSS，尽可能避免使用 JavaScript。
Logic flow:
逻辑流程：
- User clicks element
- Transition takes 0.5s to change background color from white to black
- User lets go of the mouse left button
- Transition takes 0.5s to change background color from black to white
- 用户点击元素
- 过渡需要 0.5 秒才能将背景颜色从白色变为黑色
- 用户松开鼠标左键
- 过渡需要 0.5 秒才能将背景颜色从黑色变为白色
What I want:
我想要的是：
- User clicks element
- Transition takes 0s to change
- User lets go of mouse button
- Transition takes 0.5s to change...
- 用户点击元素
- 转换需要 0 秒才能改变
- 用户松开鼠标按钮
- Transition 需要 0.5s 才能改变...
There's no 'transition-in' time, but there's a 'transition-out' time.
没有“转入”时间，但有“转出”时间。
回答by Matty K
I tried the following in the CSS3 Tryit Editor and it worked in Chrome (12.0.742.60 beta-m).
我在 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!">