html - 给箭头添加动画似乎改变了元素的中心点

Question

我网站的横幅部分中出现了一个箭头，该箭头应该居中。但是，只要我向它添加反弹效果，元素的中心点就会发生变化，因此它的左侧居中而不是元素的中心。我一直在寻找这个问题的答案，但没有找到遇到同样问题的人。我该如何解决这个问题？

箭头:

<div id="banner">
    <img src="<?php echo get_field('arrow_icon', $homepage); ?>" id="site-banner__arrow">
</div>

弹跳动画:

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
    40% {
    -webkit-transform: translateY(4%);
    transform: translateY(4%);
  }
    60% {
    -webkit-transform: translateY(60%);
    transform: translateY(60%);
  }
}

箭头的CSS:

#site-banner__arrow {
  position: absolute;
  bottom: 10%;
  -webkit-transform: translateY(-10%);
  -ms-transform:     translateY(-10%);
  transform:         translateY(-10%);
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform:     translateX(-50%);
  transform:         translateX(-50%);
  width: 60px;
  height: 60px;
  cursor: pointer;
  -webkit-animation: bounce 1.5s infinite;
  -moz-animation:    bounce 1.5s infinite;
  -o-animation:      bounce 1.5s infinite;
  animation:         bounce 1.5s infinite;

  &:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state:    paused;
    -o-animation-play-state:      paused;
    animation-play-state:         paused;
  }
}

Answer 1

正如@Pepo_rasta 所说，您的多个转换语句相互覆盖。

这包括动画，所以答案是确保将所有变换放在一起是单个语句。

.center {
  height: 100vh;
  width: 1px;
  position: absolute;
  left: 50%;
  background: red;
}
#site-banner__arrow {
  position: absolute;
  bottom: 10%;
  -webkit-transform: translate(-50%, -10%);
  -ms-transform: translate(-50%, -10%);
  transform: translate(-50%, -10%);
  left: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  -webkit-animation: bounce 1.5s infinite;
  -moz-animation: bounce 1.5s infinite;
  -o-animation: bounce 1.5s infinite;
  animation: bounce 1.5s infinite;
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
  }
  40% {
    -webkit-transform: translate(-50%, 4%);
    -webkit-transform: translate(-50%, 4%);
  }
  60% {
    -webkit-transform: translate(-50%, 60%);
    -webkit-transform: translate(-50%, 60%);
  }
}

<div id="banner">
  <img src="http://lorempixel.com/output/abstract-q-c-75-75-1.jpg" id="site-banner__arrow" />
</div>

<div class="center"></div>

应该注意的是，这使得代码比多条语句更容易编写和阅读

  -webkit-transform: translate(-50%, -10%);
  -ms-transform: translate(-50%, -10%);
  transform: translate(-50%, -10%);

也可以写成

  -webkit-transform: translateX(-50%) translateY(-10%);
  -ms-transform: translateX(-50%) translateY(-10%);
  transform: translateX(-50%) translateY(-10%);

我似乎还记得 Safari 可能有(曾经有过？)关于分离的 transform 语句的问题。