Regarding Your solution for multiple css3 transitions

Question

Thanks in advance I was reading your point on CSS3 Multiple Transitions of the Same Element and added my code below as it doesn't seem to work for me but wondering if it is because you cannot target scale without calling all?

Code:

.link-amazon a {
    background:url(https://dl.dropboxusercontent.com/u/47292400/amazon1.png) no-repeat scroll 0 0 rgba(0,0,0,0);
    display:block;
    float:left;
    height:140px;
    position:relative;
    text-indent:-3000px;
    width:258px;
   -moz-transform:scale(1);
   -webkit-transform:scale(1);
   -o-transform:scale(1);
   -ms-transform:scale(1);
    transform:scale(1);
   -webkit-transition: scale .7s ease-in-out,background-position 0 linear;
   -moz-transition: scale .7s ease-in-out,background-position 0 linear;
   -ms-transition: scale .7s ease-in-out,background-position 0 linear;
   -o-transition: scale .7s ease-in-out,background-position 0 linear;
    transition: scale .7s ease-in-out,background-position 0 linear;
}

.link-amazon a:hover {
    background-position:0 -140px;
   -moz-transform:scale(1.1);
   -webkit-transform:scale(1.1);
   -o-transform:scale(1.1);
   -ms-transform:scale(1.1);
    transform:scale(1.1);
    opacity:1;
}

have also tried this....

.link-amazon a {
  background:url(https://dl.dropboxusercontent.com/u/47292400/amazon1.png) no-repeat scroll 0 0 rgba(0,0,0,0);
  display:block;
  float:left;
  height:140px;
  position:relative;
  text-indent:-3000px;
  width:258px;
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  -webkit-transition:transform .7s ease-in-out,background-position 0 linear;
  -moz-transition:transform .7s ease-in-out,background-position 0 linear;
  -ms-transition:transform .7s ease-in-out,background-position 0 linear;
  -o-transition:transform .7s ease-in-out,background-position 0 linear;
  transition:transform .7s ease-in-out,background-position 0 linear;
}

where scale is switched for transform but it still doesn't work.

You have to transition the property, not the value of the property (that is, transform and not scale) — vals, Feb 24 '14 at 18:42

score 0 · Answer 1 · answered Feb 25 '14 at 17:50

0

If you are using this

-moz-transform:scale(1);

for firefox, then you should use this

-moz-transition: -moz-transform .7s ease-in-out,background-position 0 linear;

If you are using this

-webkit-transform:scale(1);

for webkit, you should use

-webkit-transition: -webkit-transform .7s ease-in-out,background-position 0 linear;

and so on ...

answered Feb 25 '14 at 17:50

vals

61,425
11
89
138

If you see my above I have followed that but it still doesn't work, can you see my code in the answer above? I am still getting familiar with stackoverflow, can you not put code in comments? – David Alexander Feb 26 '14 at 02:06

Regarding Your solution for multiple css3 transitions

1 Answers1