使用CSS3转换，它可能有一个“平滑”和“平滑下来”效果的任何属性。
我可以让它设置为只有一个“平滑下来”的效果吗？我想的解决方案是在CSS中，如果可能的话，避免JavaScript。
逻辑流程：
>用户点击元素
>转换需要0.5s来将背景颜色从白色更改为黑色
>用户放开鼠标左键
>转换需要0.5s来将背景颜色从黑色更改为白色
我想要的是：
>用户点击元素
>转换需要0s来改变
>用户放开鼠标按钮
>过渡需要0.5s来改变…
没有“过渡时间”，但有一个“过渡时间”的时间。
解决方法
我试过下面的CSS3 Tryit编辑器，它工作在Chrome(12.0.742.60 beta-m)。
<!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>
原文地址：https://www.jb51.cc/html5/169940.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
