CSS3单向过渡？

使用CSS3过渡，可以对任何属性产生“平滑”和“平滑”效果。

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

逻辑流程：

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

我想要的是：

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

没有“过渡”时间，但是有“过渡”时间。

html css

— 阿比舍克
source

128

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

展开摘要

— 马蒂·K
source

h！我不敢相信这不是发生在我身上……当然！基本转换设置为0s，活动状态转换覆盖基本值，并且设置为0.5s ...叹气...我需要一杯咖啡...

— Abhishek

就我而言，我想要一个过渡以在悬停时发生延迟/发生，而不是悬停时发生。一旦我阅读了上面的内容，解决方案就更简单了：只需在：hover规则上添加一个过渡，而无需取消其他任何地方。感谢您指出正确的方向，并举一个清晰的例子。

— Schmuli 2012年

谢谢您的回答，我已经对其进行了测试，但是当转换设置为其他方式时，

— 它对我有用

谢谢！猜猜我在想太复杂了。我想要opacity一旦存在CSS类，b就可以“淡出”一个元素，但是一旦CSS类消失（无过渡），它就会突然显示更改。所以我定义了.a { transition: ... 0s...; } .b { opacity: 0.5; } .b.a { transition: ... 2s ...; }。现在，如果始终a附有CSS类的元素也获得了class b，b则不透明度逐渐淡出为0.5，而当突然不存在时，则不会过渡。

— 伊戈尔