CSS3单向转换？ [英] CSS3 one-way transition?
本文介绍了CSS3单向转换？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用CSS3转换，可以对任何属性具有平滑和平滑效果。
Using CSS3 transitions, it's possible to have a 'smooth up' and 'smooth down' effect to whatever property.
我可以让它设置为只有一个平滑下来的效果吗？
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.
逻辑流程：
- 用户点击元素
- 转换需要0.5秒将背景颜色从白色更改为黑色
- 转换需要0.5秒将背景颜色从黑色更改为白色
- 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秒才能更改
- 用户放开鼠标按钮
- 转换需要0.5秒才能更改...
- User clicks element
- Transition takes 0s to change
- User lets go of mouse button
- Transition takes 0.5s to change...
没有过渡时间，但有一个过渡时间。
There's no 'transition-in' time, but there's a 'transition-out' time.
推荐答案
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
/* 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;
}
</style>
</head>
<body>
<input type="button" value="click me to see the transition effect!">
</body>
</html>
这篇关于CSS3单向转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
