主页 / 问题 / 687913
Accepted
etterwin
Asked:2020-07-06 16:21:48 +0000 UTC2020-07-06 16:21:48 +0000 UTC

如何制作像“穿梭跑”这样的循环动画？

  • 772

在此处输入图像描述

鱼游了一段距离，到达一定距离后，它必须转身游回来。动画规则是什么？

CSS

@keyframes go-right-left {
  from {
    right: 0px;
  }
  to {
    right: calc(40% - 50px);
  }
}

@-webkit-keyframes go-right-left {
  from {
    right: 0px;
  }
  to {
    right: calc(40% - 50px);
  }
}

.fish-blue {
  animation: go-right-left 60s ease infinite alternate;
  -webkit-animation: go-right-left 60s ease infinite alternate;
  position: relative;
}
css

1 个回答

  1. Best Answer

    有alternate很多错误，所以最好是这样：

    .fish {
  background: url('https://image.ibb.co/iRhXWL/an144.gif') no-repeat;
  height: 61px;
  width: 100px;
  position: absolute;
  top: 50px;
  transition: left 2.4s;
  animation: fish 5s ease infinite, fish-rotate 5s steps(1) infinite;
}

@keyframes fish {
  0% {
    left: 20px;
  }
  50% {
    left: 300px;
  }
  100% {
    left: 20px;
  }
}

@keyframes fish-rotate {
  0% {
    transform: scale(-1, 1)
  }
  50% {
    transform: scale(1, 1)
  }
  100% {
    transform: scale(-1, 1)
  }
}
    <div class="fish"></div>

    • 7

相关问题