CSS3 one-way transition?

Question

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.

Logic flow:

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

What I want:

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.

Matty K · Accepted Answer · 2017-09-15T00:27:09.860

151

I tried the following in the CSS3 Tryit Editor and it worked in 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!">

edited Sep 15 '17 at 00:27

answered May 23 '11 at 03:33

Matty K

3,781
2
22
19

7

doh! I can't believe that this didn't occur to me... Ofcourse! The base transition is set to 0s, and the active state transition overrides the base values, and that is set to 0.5s... Sigh... I need a cup of coffee... – Abhishek May 23 '11 at 03:43
18

In my case I wanted a transition to delay/occur on hover in, not on hover out. The solution was simpler once I read the above: just put a transition on the :hover rule, no need to cancel anything anywhere else. Thanks for pointing in the correct direction, with a clear example. – Schmuli Jun 04 '12 at 19:31
Thank you for your answer, I tested it, but it worked for me (in Chrome) when the transition was set the other way around, I don't know if the specs have changed or something – AbdulRahman AlHamali Oct 04 '16 at 13:12
Thank you! Guess I was thinking too complicated. I wanted the `opacity` to "fade-out" an element once a CSS class `b` was present, yet to abruptly show the changes once that CSS class was gone (with no transition). So I defined `.a { transition: ... 0s...; } .b { opacity: 0.5; } .b.a { transition: ... 2s ...; }`. Now if an element, which always has CSS class `a` attached, also gets class `b`, opacity fades out to 0.5, while when `b` is suddenly not present anymore, there is no transition back. – Igor Apr 22 '20 at 19:43

Nicolas Guidetti · Answer 2 · 2023-02-09T13:55:05.717

6

using "transition:none" works also :

div{
  background: tomato;
  transition: background 0.3s ease-in;
}
div:active{
  background: blue;
  transition: none;
}

<div>click me</div>

edited Feb 09 '23 at 13:55

answered Jul 22 '21 at 14:50

Nicolas Guidetti

81
2
5

CSS3 one-way transition?

2 Answers2

Linked