Can I have different Transitions on the same tag?

Question

Hello folks would like to know if I can have more than one Transition on the same tag? Why do I implement Transitions for the properties but it doesn’t work? *Or this is because I haven’t set the property values before.

.trans {
    background: #F00;
    height: 250px;
    opacity: 1;
    -webkit-transition: opacity .25s 1s ease-in-out;
    -moz-transition: opacity .25s 1s ease-in-out;
    -ms-transition: opacity .25s 1s ease-in-out;
    -o-transition: opacity .25s 1s ease-in-out;
    transition: opacity .25s 1s ease-in-out;

    -webkit-transition: height 1.25s ease-in-out;
    -moz-transition: height 1.25s ease-in-out;
    -ms-transition: height 1.25s ease-in-out;
    -o-transition: height 1.25s ease-in-out;
}

.trans:hover {
    height: 10px;
    opacity: .5;
}

Example with the code. http://jsfiddle.net/hphf0c74/

Thank you in advance.

Answer 1

The way you did, the transition from height simply override that of opacity. You need to list all properties that will transition at once, separated by commas, like this:

.trans {
    background: #F00;
    height: 250px;
    opacity: 1;
    -webkit-transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
    -moz-transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
    -ms-transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
    -o-transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
    transition: opacity .25s 1s ease-in-out, height 1.25s ease-in-out;
}

Answer 2

Oops! You cannot use Transition twice. The secret is to use all properties in just one Transition. You also need to set an initial height and opacity in .trans and an ending in .trans:hover.

Follow my solution: http://jsfiddle.net/hphf0c74/1/

CSS

.trans {
  background: #F00;
  -webkit-transition: height .25s ease-in-out, opacity 0.3s ease;
  -moz-transition: height .25s ease-in-out, opacity 0.3s ease;
  -ms-transition: height .25s ease-in-out, opacity 0.3s ease;
  -o-transition: height .25s ease-in-out, opacity 0.3s ease;
  transition: height .25s ease-in-out, opacity 0.3s ease;
  height:0px;
  width:100%;
  opacity:1;
}

.trans:hover {
  height: 30px;
  opacity: .5;
}