Question

除了不透明度外，我还使用CSS变换（scale和translateY）放大并向下移动了三个箭头的动画。它在Chrome，Firefox中可正常工作。请访问jsfiddle以获得使用SCSS的演示。

$base: .6rem;

.scroll-animation {
  position: absolute;
  width: 100%;
  height: 41px;
  bottom: 24px;
  display: flex;
  justify-content: center;

  &:focus {
    outline: none;
  }

  .chevron {
    position: absolute;
    width: $base * 3.35;
    height: $base * .3;
    opacity: 0;
    transform: scale(.3);
    animation-name: move-chevron;
    animation-duration: 3.15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .chevron:first-child {
    animation-delay: 0.28s;
  }

  .chevron:nth-child(2) {
    animation-delay: 0.66s;
  }

  .chevron:before, .chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: red;
  }

  .chevron:before {
    left: 0;
    transform: skewY(30deg);
  }

  .chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
  }

  @keyframes move-chevron {
    25% {
      opacity: 1;
    }

    33.3% {
      opacity: 1;
      transform: translateY($base * 2.8);
    }

    53.2% {
      opacity: .2;
      transform: translateY($base * 4.65) scale(0.3);
    }

    60.7% {
      opacity: 0;
      transform: translateY($base * 5.15) scale(0);
    }

    100% {
      opacity: 0;
      transform: translateY($base * 5.15) scale(0);
    }
  }
}

<div class="scroll-animation">
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
</div>

Answer 1

您可能只需要使用所有前缀（例如-webkit-，-moz-等）。

$base: .6rem;

.scroll-animation {
  position: absolute;
  width: 100%;
  height: 41px;
  bottom: 24px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;

  &:focus {
    outline: none;
  }

  .chevron {
    position: absolute;
    width: $base * 3.35;
    height: $base * .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transform: scale(.3);
    -moz-transform: scale(.3);
    -ms-transform: scale(.3);
    -o-transform: scale(.3);
    transform: scale(.3);
    animation-name: move-chevron;
    animation-duration: 3.15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .chevron:first-child {
    animation-delay: 0.28s;
  }

  .chevron:nth-child(2) {
    animation-delay: 0.66s;
  }

  .chevron:before, .chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: red;
  }

  .chevron:before {
    left: 0;
    -wekkit-transform: skewY(30deg);
    -moz-transform: skewY(30deg);
    -ms-transform: skewY(30deg);
    -o-transform: skewY(30deg);
    transform: skewY(30deg);
  }

  .chevron:after {
    right: 0;
    width: 50%;
    -webkit-transform: skewY(-30deg);
    -moz-transform: skewY(-30deg);
    -ms-transform: skewY(-30deg);
    -o-transform: skewY(-30deg);
    transform: skewY(-30deg);
  }

  @keyframes move-chevron {
    25% {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -moz-opacity: 1;
      -khtml-opacity: 1;
      opacity: 1;
    }

    33.3% {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -moz-opacity: 1;
      -khtml-opacity: 1;
      opacity: 1;
      -webkit-transform: translateY($base * 2.8);
      -moz-transform: translateY($base * 2.8);
      -ms-transform: translateY($base * 2.8);
      -o-transform: translateY($base * 2.8);
      transform: translateY($base * 2.8);
    }

    53.2% {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
      filter: alpha(opacity=20);
      -moz-opacity: 0.2;
      -khtml-opacity: 0.2;
      opacity: .2;
      -webkit-transform: translateY($base * 4.65) scale(0.3);
      -moz-transform: translateY($base * 4.65) scale(0.3);
      -ms-transform: translateY($base * 4.65) scale(0.3);
      -o-transform: translateY($base * 4.65) scale(0.3);
      transform: translateY($base * 4.65) scale(0.3);
    }

    60.7% {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -moz-opacity: 0;
      -khtml-opacity: 0;
      opacity: 0;
      -webkit-transform: translateY($base * 5.15) scale(0);
      -moz-transform: translateY($base * 5.15) scale(0);
      -ms-transform: translateY($base * 5.15) scale(0);
      -o-transform: translateY($base * 5.15) scale(0);
      transform: translateY($base * 5.15) scale(0);
    }

    100% {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -moz-opacity: 0;
      -khtml-opacity: 0;
      opacity: 0;
      -webkit-transform: translateY($base * 5.15) scale(0);
      -moz-transform: translateY($base * 5.15) scale(0);
      -ms-transform: translateY($base * 5.15) scale(0);
      -o-transform: translateY($base * 5.15) scale(0);
      transform: translateY($base * 5.15) scale(0);
    }
  }
}

根据您要支持的浏览器，某些值可能过多或不足，但是您明白了。

这变得乏味，这是Sass真正进行救援的地方;-)

如果仍然无法使用，则可能还必须为animation-相关属性添加前缀。尽管我不记得是否可以在单独的属性上执行此操作。您可能必须使用带有前缀的长animation快捷键。

涉及Safari上的不透明度，缩放比例和translationY问题的CSS动画

1 个答案: