CODEWITHSUNDEEP
htmlcss
Abhishek
Abhishek

Reputation: 4350

CSS3 one-way transition?

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:

What I want:

There's no 'transition-in' time, but there's a 'transition-out' time.

Upvotes: 111

Views: 71965

Answers (2)

Nicolas Guidetti
Nicolas Guidetti

Reputation: 111

using "transition:none" works also :

div{
  background: tomato;
  transition: background 0.3s ease-in;
}
div:active{
  background: blue;
  transition: none;
}
<div>click me</div>

Upvotes: 9

Matty K
Matty K

Reputation: 3891

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

Upvotes: 157

Related Questions