html - 针对同一个 div 的两个 CSS 动画在 Chrome 上无法运行，但在 Safari 上运行良好

Question

我有以下标记和 CSS。该按钮受两个 CSS 动画的影响:呈现按钮时的 bounceIn 动画和悬停效果。

我的问题是这在 Safari 中工作正常，但在 Chrome 中不起作用。由于 bounceIn 动画，Chrome 似乎忽略了 :hover 伪类中的 transform 规则。如果我删除以下类:animated-second bounceInUp，悬停状态有效。有什么想法吗？

.ico-btn.blue-stroke {
  background-color: transparent;
  border-color: rgb(52, 152, 219);
  border-right-style: solid;
  border-right-width: 10px;
  border-bottom-style: solid;
  border-bottom-width: 10px;
  border-left-color: rgb(52, 152, 219);
  border-left-style: solid;
  border-left-width: 10px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-top-style: solid;
  border-top-width: 10px;
}
.ico-btn.btn-settings-smm-txt {
  font-family: 'webfontregular', Arial, sans-serif;
  font-size: 100px;
  font-weight: 900;
  height: 80px;
  line-height: 15px;
  min-width: 0px;
  padding: 60px 0 0 0;
  text-align: center;
  white-space: nowrap;
  width: 140px;
  z-index: 2;
  color: rgb(52, 152, 219);
}
.ico-btn {
  margin-right: 0px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  -webkit-transition: -webkit-transform .1s ease-out;
  -moz-transition: -moz-transform .1s ease-out;
  -o-transition: -o-transform .1s ease-out;
  transition: transform .1s ease-out;
}
.ico-btn:hover,
.ico-btn:active,
.ico-btn-android {
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
  opacity: 0.80;
  color: #89df88;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.animated-second {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

<div role="button" class="ico-btn btn-settings-smm-txt blue-stroke campaign-button animated-second bounceInUp">
  <span>A</span>
</div>

Answer 1

问题(出于某种我不知道的原因)似乎是因为 .animated-second 选择器的 animation-fill-mode: both 设置。将其设置为 animation-fill-mode: none 似乎可以解决问题。

我能想到的唯一解释是 animation-fill-mode: both使元素在动画完成后保持最后一个关键帧的状态，并且由于最后一个关键帧具有 transform 设置，它以某种方式阻止应用缩放，而当填充模式设置为 none，元素在动画完成后没有transform。

设置animation-fill-mode: backwards还可以使缩放变换起作用，因为这也类似于 animation-fill-mode(从某种意义上说，它不会使元素保持变换)，它有点证明了上述观点。

(我正在尝试找到确切的原因，并会在找到时对其进行编辑，或者如果发布了更好的答案，我会删除我的答案。)

.ico-btn.blue-stroke {
  background-color: transparent;
  border-color: rgb(52, 152, 219);
  border-right-style: solid;
  border-right-width: 10px;
  border-bottom-style: solid;
  border-bottom-width: 10px;
  border-left-color: rgb(52, 152, 219);
  border-left-style: solid;
  border-left-width: 10px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-top-style: solid;
  border-top-width: 10px;
}
.ico-btn.btn-settings-smm-txt {
  font-family: 'webfontregular', Arial, sans-serif;
  font-size: 100px;
  font-weight: 900;
  height: 80px;
  line-height: 15px;
  min-width: 0px;
  padding: 60px 0 0 0;
  text-align: center;
  white-space: nowrap;
  width: 140px;
  z-index: 2;
  color: rgb(52, 152, 219);
}
.ico-btn {
  margin-right: 0px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  -webkit-transition: -webkit-transform .1s ease-out;
  -moz-transition: -moz-transform .1s ease-out;
  -o-transition: -o-transform .1s ease-out;
  transition: transform .1s ease-out;
}
.ico-btn:hover,
.ico-btn:active,
.ico-btn-android {
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
  opacity: 0.80;
  color: #89df88;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.animated-second {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
}
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

<div role="button" class="ico-btn btn-settings-smm-txt blue-stroke campaign-button animated-second bounceInUp">
  <span>A</span>
</div>