Can I have different transitions in the same tag?

Question

Can I have different transitions in the same tag?

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

Hello everyone, would you like to know if I can have more than one transition in the same tag? Why implement the transitions for properties but it does not work? * Or this is because I have not 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. link

Thank you in advance.

html html5 css css3

asked by anonymous 12.08.2014 / 22:25

2 answers

1

Oops! You can not use the transition twice. The key is to use all properties in just one transition. You also need to set an initial height and opacity to .trans and a final to .trans:hover .

Follow my solution: link

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;
}

12.08.2014 / 22:42

Mark (colorize) a string to write to the file Create a conditional using the relational model

score 1 · Accepted Answer

As you've done, the transition from height simply overrides opacity . You need to list all properties that will undergo a one-time transition, 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;
}