Question

使用CSS3过渡，可以对任何属性进行“平滑上升”和“平滑下降”效果。

我可以将其设置为仅具有“平滑”效果吗？我希望解决方案只能在CSS中使用，如果可能，请避免使用JavaScript。

逻辑流程：

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

我想要的是什么：

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

没有'过渡时间'，但是有一个'过渡'时间。

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!">

Answer 2

使用“transition:none”也可以：

div{
  height: 40px;
  width: 40px;
  padding: 40px;
  background: tomato;
  transition: background 0.3s ease-in;
}
div:active{
  background: blue;
  transition: none;
}

<div>click me</div>

CSS3单向转换？

2 个答案: