Question

我试图制作一个类似于site中的箭头的动画箭头。我可以使用here演示我的代码尝试。但是动画并没有与网站上的动画一致。

我的代码：

.animated-arrow-1 {
    -webkit-animation: arrow1 3s infinite ease-out;
    animation: arrow1 3s infinite ease-out;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

 .animated-arrow-2 {
    -webkit-animation: arrow2 3s infinite ease-in;
    animation: arrow2 3s infinite ease-in;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1
}


@-webkit-keyframes arrow1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }

    90% {
        opacity: 0;
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0,36px);
        transform: translate(0,36px)
    }
}

@keyframes arrow1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0)
    }

    90% {
        opacity: 0;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0,36px);
        -ms-transform: translate(0,36px);
        transform: translate(0,36px)
    }
}

@-webkit-keyframes arrow2 {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }

    90% {
        opacity: 1;
        -webkit-transform: translate(0,0);
        transform: translate(0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0,36px);
        transform: translate(0,36px)
    }
}

@keyframes arrow2 {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0)
    }

    90% {
        opacity: 1;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0,36px);
        -ms-transform: translate(0,36px);
        transform: translate(0,36px)
    }
}

你能不能告诉我在这里错过了什么？

Answer 1

你已经足够接近实现所需的动画了。在你的代码中，两个箭头只有一个从0px到36px的移动，但实际需要的是一个两阶段动画，两个箭头的关键帧设置不同。一个箭头应该在0px处开始不可见，淡入到50px，保持在那里然后淡出到100px而另一个箭头应该以50px开始可见，淡出到100px，立即转到0px然后以50px淡入

.icon {
  position: relative;
}
.icon img {
  position: absolute;
  margin: auto;
  display: block;
}
.animated-arrow-1 {
  animation: arrow1 3s infinite linear;
  opacity: 0
}
.animated-arrow-2 {
  animation: arrow2 3s infinite linear;
  opacity: 1;
}
@keyframes arrow1 {
  0%, 10% {
    opacity: 0;
    transform: translate(0, 0px);
  }
  50%,
  60% {
    opacity: 1;
    transform: translate(0, 50px)
  }
  100% {
    opacity: 0;
    transform: translate(0, 100px)
  }
}
@keyframes arrow2 {
  0%, 10% {
    opacity: 1;
    transform: translate(0, 50px);
  }
  50%,
  60% {
    opacity: 0;
    transform: translate(0, 100px)
  }
  61% {
    opacity: 0;
    transform: translate(0, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 50px)
  }
}
body {
  background: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="icon">
  <img src="http://s12.postimg.org/ibsmfp6w9/Down_Arrow.png" class="animated-arrow-1" />
  <img src="http://s12.postimg.org/ibsmfp6w9/Down_Arrow.png" class="animated-arrow-2" />
</div>

使用CSS3动画箭头以提供循环移动效果

1 个答案: