针对同一个div的两个CSS动画不会在Chrome上运行，但在Safari上运行正常

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题（由于某些原因我不知道）似乎是因为animation-fill-mode: both选择器的.animated-second设置。将其设置为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>