Question

动画

@keyframes action-cycle {
  0%    {
    opacity: 0;
    transform: scale(0) translateY(-50%) translateX(-50%);
    transform-origin: top left;
    letter-spacing: -0.3em;
  }
  1%   {
    opacity: 1;
    transform: scale(1) translateY(-50%) translateX(-50%);
    transform-origin: top left;
    letter-spacing: -0.055em;
  }
  8%   {
    opacity: 1;
    transform: scale(1) translateY(-50%) translateX(-50%);
    transform-origin: top left;
  }
  24%   {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%);
    transform-origin: top left;
  }
  25%   {
    opacity: 0;
    transform: translateY(-100%) translateX(-50%);
    transform-origin: top left;
  }

  //second
  100%  {
    opacity: 0; 
    filter: alpha(opacity=0);
    transform: translateY(-100%) translateX(-50%);
    transform-origin: top left;
  }
}

DOM

<ul class="header__text-overlay__action">
    <li class="action action--first">learn</li>
    <li class="action action--second">grow</li>
    <li class="action action--third">play</li>
    <li class="action action--fourth">work</li>
</ul>

动画将应用于具有特定动画延迟的每个列表项：

.action{
    position:absolute;
    top:50%;
    left: calc(50% - 5px);
    transform: translateY(-50%) translateX(-50%);
    transform-origin: top-left;
    animation-name: action-cycle;
    animation-iteration-count: infinite;
    animation-duration: $animation-length*1s;

    &--first{
    }

    &--second{
        // opacity: 1;
        animation-delay: ($animation-length/$item-count)*1s;
    }

    &--third{
        letter-spacing: -0.033em;
        // opacity: 1;
        animation-delay: ($animation-length/$item-count)*2s;
    }

    &--fourth{
        // opacity: 1;
        animation-delay: ($animation-length/$item-count)*3s;
    }
}

不知何故，Opacity是Safari唯一忽略的属性。我在Safari版本9.0.2和iPhone上测试了iOS 9最新版本。

注意我的预处理器

会自动添加必要的供应商前缀

CSS3关键帧动画不透明度属性在Safari中不起作用

0 个答案: