css - 此CSS动画(.less)在Firefox和Chrome中有效，而在Safari中不可用

我的webapp中正在播放这个CSS3动画，它的面板位于屏幕的左下方。我使用Linux，所以无法在Safari中试用动画，但是我的项目负责人当然是Mac用户，他立即抱怨说它不起作用。

所以，这是我的两个文件。我将所有内容粘贴到这里工作中，而在底部，我有一个jsfiddle试图用纯CSS和更少的HTML标签重现它。 :)

这是较少的文件。

.panel {
  position:absolute;
  left:20px;
  bottom:20px;
  background-image : url("./images/filter_bg.png");
  width:476px;
  height:126px;
  z-index:1;
  cursor:pointer;
}

.filter {
  position:relative;
  float:left;
  z-index: 2;
  width:119px;
  height:119px;
  vertical-align:24px;
  overflow:hidden;
  &.activeLive {
    background-image: url("./images/filter_active1.png");
  }
  &.activeSee {
    background-image: url("./images/filter_active2.png");
  }
  &.activeEat {
    background-image: url("./images/filter_active3.png");
  }
  &.activeDo {
    background-image: url("./images/filter_active4.png");
  }
}

.filter:hover > .filter-hover {
  position:absolute;
  height:34px;
  width:119px;
  -moz-transition:-moz-transform 180ms;
  -webkit-transition:-webkit-transform 180ms;
  -o-transition:-o-transform 180ms;
  transition:transform 180ms;
  background-image:url("./images/filter_hoverlabel_bg.png");

}
.filter:hover > .filter-hover {
  transform: translate(0,-24px);
}

.filter-hover{
  position: relative;
  bottom:-26px;
  text-align:center;
  line-height: 32px;
}
.filter-icon{
  width:68px;
  height:68px;
  margin: 24px auto auto;
  &.inactive1{
    background-image:url("./images/filter_icon1_inactive.png");
  }
  &.inactive2{
    background-image:url("./images/filter_icon2_inactive.png");
  }
  &.inactive3{
    background-image:url("./images/filter_icon3_inactive.png");
  }
  &.inactive4{
    background-image:url("./images/filter_icon4_inactive.png");
  }
  &.active1{
    background-image:url("./images/filter_icon1_active.png");
  }
  &.active2{
    background-image:url("./images/filter_icon2_active.png");
  }
  &.active3{
    background-image:url("./images/filter_icon3_active.png");
  }
  &.active4{
    background-image:url("./images/filter_icon4_active.png");
  }
}
.filter-text{
  text-align:center;
}

当单击时，它将为div添加一个类，为此我使用angular。因此，不必对此太在意。

<div class="panel" ng-controller="PanelCtrl">
            <div class="{{liveEnabled ? 'filter activeLive' : 'filter'}}" ng-click="liveButton()">
                <div class="{{liveEnabled ? 'filter-icon active1' : 'filter-icon inactive1'}}"></div>
                <div class="filter-hover">
                    Bo
                </div>
            </div>
            <div class="{{seeEnabled ? 'filter activeSee' : 'filter'}}" ng-click="seeButton()">
                <div class="{{seeEnabled ? 'filter-icon active2' : 'filter-icon inactive2'}}"></div>
                <div class="filter-hover">
                    <span class="filter-text">Se</span>
                </div>
            </div>
            <div class="{{eatEnabled ? 'filter activeEat' : 'filter'}}" ng-click="eatButton()">
                <div class="{{eatEnabled ? 'filter-icon active3' : 'filter-icon inactive3'}}"></div>
                <div class="filter-hover">
                    <span class="filter-text">Äta</span>
                </div>
            </div>
            <div class="{{doEnabled ? 'filter activeDo' : 'filter'}}" ng-click="doButton()">
                <div class="{{doEnabled ? 'filter-icon active4' : 'filter-icon inactive4'}}"></div>
                <div class="filter-hover">
                    <span class="filter-text">Göra</span>
                </div>
            </div>
        </div>

我做了这个小提琴：http://jsfiddle.net/j97ahnkv/ wich试图表明我在做什么。

最佳答案

它在Safari中不起作用，因为它在-webkit上仍然requires the transform prefix。

您必须将其添加到以下规则：

.filter:hover > .filter-hover {
   -webkit-transform: translate(0, -24px);
    transform: translate(0,-24px);
}