Question

我知道有很多关于此的文档，根据Chris Coyier的这篇文章https://css-tricks.com/transitions-and-animations-on-css-generated-content/ Safari 6.1及其支持伪元素转换。我已经在Chrome和Firefox上测试了我的代码，然而我的过渡工作在Safari 6.2.3上没有过渡。伪元素向右移动但它很刺耳并立即发生。即过渡属性未被应用。

这是我的代码。 fontello包括一个图标。

@mixin animation-right($font-size: $base-font-size) {
  &:after {
    @include transition(transform 300ms ease); 
    $font-size: $font-size;
    color: $color-blue-bright;
    @include fontello(
      $icon: $icon-arrow-right,
      $height: .8em
    );
    font-size: em($font-size, $base-font-size);
    margin-left: em(10px);
  }

  &:hover,
  &:focus, {
    &:after {
      @include translateX(100%);
      @include fontello(
        $icon: $icon-right,
        $height: 1em
      );
      color: $color-orange;
    }
  }  
}

它的应用如下：

a {
  @include animation-right($font-size: 14px);
}

正如我所说，它正在使用Chrome和Firefox。有什么想法吗？

Answer 1

过渡混合的内容是什么以及您可以为其分配哪种参数？如果参数是'$ value ...'，您可能需要添加-webkit前缀：

@include transition(transform 300ms ease, -webkit-transform 300ms ease);

P.S。很久以前，当我尝试使用百分比值转换翻译属性时，我遇到了一些问题（动画更加顺畅）。

CSS转换不适用于Safari的伪元素

1 个答案: