CSS 3单向过渡?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (127)

使用CSS3转换,可以对任何属性进行“smooth up”和“smooth down”效果。

我可以让它设置为只有“smooth down”效果吗?我希望解决方案只能在CSS中使用,如果可能的话避免使用JavaScript。

逻辑流程:

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

我想要的是:

  • 用户点击元素
  • 过渡需要改变0
  • 用户放开鼠标按钮
  • 过渡需要0.5s来改变...
提问于
用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券