Question

在此先感谢我在CSS3 Multiple Transitions of the Same Element上阅读你的观点，并在下面添加了我的代码，因为它似乎对我不起作用，但想知道是否因为你不能在不调用所有目标的情况下定位比例？

代码：

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

也试过这个......

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

其中scale被切换为变换但它仍然不起作用。

Answer 1

如果您正在使用此

-moz-transform:scale(1);

对于firefox，那么你应该使用这个

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

如果您正在使用此

-webkit-transform:scale(1);

对于webkit，您应该使用

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

依旧......

关于您的多个css3过渡的解决方案

1 个答案: