Как сделать зацикленную анимацию типа “челночный бег”?

#css #css_animation

Рыбка плывет определенное расстояние, по достижению которого должна развернуться
и поплыть обратно. Какие правила анимации нужно сделать?

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;
}

    

Ответы

Ответ 1

С 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)
  }
}