这个CSS动画(.less)适用于Firefox和Chrome，而不是Safari

Question

我的网络应用程序中有一个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/维奇试图展示我要做的事情。

Answer 1

它在Safari中不起作用，因为它仍然需要transform上的-webkit前缀。

您必须将其添加到此规则中：

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