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语句的问题。

向箭头添加动画似乎会更改元素的中心点

1 个答案: