Adding Transition to a Different Property

Adding transition to a different property

Unfortunately it's not possible to "extend" a property in another rule in CSS, no matter if it's a transition or another property.
Some alternatives may be:

Creating a rule for the combination of the classes

.class1.class2 {transition:background-color 0.4s, top 1s;}

The cons are that you have to create such rule for each of the relevant combinations. This also means code duplication.

Changing the html to eliminate the need to combine the rules

Find a proper way of representing the html objects so you won't need to extend the rules. In my case it's:

<div class="class2">
  <div class="class1">
</div>

The cons are a bit more complicated html. On the other hand you avoid duplicate code, and make your css more reusable.

CSS transitions for multiple properties

You have correctly added a transition to the html element that is going to be "transitioned" from state x to state y. To engage multiple css properties, use commas, like this example:

transition: width 2s, height 2s, background-color 2s, transform 2s;

CSS transition shorthand with multiple properties?

Syntax:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Note that the duration must come before the delay, if the latter is specified.

Individual transitions combined in shorthand declarations:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Or just transition them all:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Here is a straightforward example. Here is another one with the delay property.

Edit: previously listed here were the compatibilities and known issues regarding transition. Removed for readability.

Bottom-line: just use it. The nature of this property is non-breaking for all applications and compatibility is now well above 94% globally.

If you still want to be sure, refer to http://caniuse.com/css-transitions

How to have multiple CSS transitions on an element?

Transition properties are comma delimited in all browsers that support transitions:

.nav a {
  transition: color .2s, text-shadow .2s;
}

ease is the default timing function, so you don't have to specify it. If you really want linear, you will need to specify it:

transition: color .2s linear, text-shadow .2s linear;

This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-* properties instead of the shorthand:

transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;

css multiple transitions on one property?

Is this the kind of effect you're looking for? You can use the delay property for the translation rule.

.a {
  border-radius: 100%;
  color: #333;
  font-weight: bold;
  font-size: 1.5em;
  padding: 2em;
  width: 100px;
  height: 100px;
  background-color: #e3e3e3;
  transform: scale(1);
  transition: all .5s 2s;
}

.a:hover {
  transform: scale(1.2);
  transition: all .5s 0s;
}

<p class="a">Hello World.</p>