Css3 one-way transition?

Utilize pseudo-classes for one-way transitions

Pseudo-classes like :active or :focus are fantastic for one-way transitions. When applied to a button using :active, it creates a press-down effect that is instantaneously removed when released:

.button {
  background-color: green;
  transition: background-color 0.5s ease-in; /* Like a turtle, I take my sweet time turning green */
}

.button:active {
  background-color: yellow; /* But I turn yellow at the drop of a hat, or a mouse click to be exact */
}


This effect results in a prevalent transition out and an immediate return to the original state.

Making your transition smooth

A ease-in timing function brings a natural feel to your one-way transitions, enabling a more gradual transition-out effect:

input[type='text'] {
  border-color: black;
  transition: border-color 0.5s ease-in; /* Gradually, I am developing a sense of drama in changing colors */
}

input[type='text']:focus {
  border-color: orange; /* It's just that I can't take my eyes off the Orange...Oh, it's already gone. */
}


Compatibility matters

Browser compatibility shouldn't be an afterthought. Using vendor prefixes like -webkit- or -moz- ensures cross-browser compatibility. Although modern browsers are often forgiving, a serious CSS player never forgets about legacy support:

.button {
  background-color: green;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s; /* When I grow up, I want to be Ms. All-Browser Compatible! */
}


Input feedback with zero-duration transitions

Transitions can provide immediate feedback too. By assigning a transition duration of 0s, the changed property appears instantaneously, giving a responsive feel to your user input. It is highly effective for interactive elements like button clicks:

.submit-button {
  opacity: 1;
  transition: opacity 0s; /* Fast as lightning, quiet as a mouse click. */
}

.submit-button:active {
  opacity: 0.7; /* Feel the dullness, 30% less shine when you press me down. */
}


Property-specific transitions

Be selective and animate specific properties, rather than using the general all keyword. This not only improves performance but also avoids unwanted transitions on other properties:

.modal {
  transform: scale(0);
  transition: transform 0.3s; /* Playing 'Now you see me, now you don't' with the modal. */
}

.modal:target {
  transform: scale(1); /* I'm all grown up now (scale: 1), and I did it in just 0.3 seconds! */
}


Preventing transitions on page load

At times, you may want to prevent initial transitions on page load. You can do so by adding a class with JavaScript after the initial render to activate the transition:

window.onload = () => {
  document.querySelector('.fade-in').classList.add('loaded'); /* How about some drama on page load, ey? */
};


.fade-in.loaded {
  opacity: 1;
  transition: opacity 0.5s;
}
