如何防止CSS 动画在过渡后重新启动？

Question

我制作了一个按钮，它有一个小标签，悬停在它上面时会展开到一边。它在那里是因为我希望按钮可以拖动。因此，一旦选项卡展开，您就可以抓住它并四处拖动按钮。不要介意损坏的图标，它们应该来自 font awesome pack。

但是我想告诉用户，小标签可以被抓取，所以我在空闲时做了一个微动效果，播放两次表示标签可以展开。一旦用户将鼠标悬停在它上面，它就会完全展开。但是，当用户取消悬停选项卡时，动画会再次开始。我需要动画仅在页面加载时开始并且正好出现 2 次并且再也不会出现。为什么 aniamtion 在悬停时的过渡之后开始，我该怎么做才能再次禁止它设置动画？没有JS可以吗？

这是我的代码

.insite-draggable {
  z-index: 10;
  position: fixed;
  left: 45px;
  bottom: 12px;
}

.insite-handle {
  position: absolute;
  left: -14px;
  bottom: 13px;
  transition: left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
  animation: bounce 2s;
  animation-iteration-count: 2;
  animation-delay: 2s;
}

.insite-handle:before {
  content: "\f100";
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  background-color: #1ea2b1;
  cursor: move;
  color: #ffffff;
  height: 16px;
  width: 26px;
  padding: 3px 3px 3px 4px;
  border-radius: 7px 0px 0px 7px;
  border: 1px solid #1a8e9b;
  transition: padding-left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
}

.insite-handle:hover {
  left: -27px;
  animation: step-end;

  &:before { 
    content: "\f0b2";
    padding-left: 5px; 
  }
}

@keyframes bounce {
  0% { left: -14px; }
  10% { left: -20px; }
  20% { left: -14px; }
  30% { left: -20px; }
  40% { left: -14px; }
  100% {left: -14px; }
}

.insite-btn {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
  font-family: 'BrixSansBold';
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1rem;
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #b00402;
  border: none;
  margin: 10px 10px 10px auto;
  padding: 7px 10px 7px 34px;
  text-decoration: none;
  text-transform: none;
  box-shadow: #333333 1px 1px 10px;
  background-color: #e3e000;
}

<span class="insite-draggable">
 <i class="insite-handle"></i>
  <a class="insite-btn" href="#">Turn on</a>
</span>

Answer 1

我使用了 CSS 具有后备功能的变量。

var(--use-this-variable-if-exist, use this fallback if no variable);

最初没有 --left 值，因此它使用回退。悬停时，将 --left 值设置为 -27px。因此，关键帧也被更新。

.insite-draggable {
  z-index: 10;
  position: fixed;
  left: 45px;
  bottom: 12px;
}

.insite-handle {
  position: absolute;
  left: -14px;
  bottom: 13px;
  transition: left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
  animation: bounce 2s;
  animation-iteration-count: 2;
  animation-delay: 2s;
}

.insite-handle:before {
  content: "\f100";
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  background-color: #1ea2b1;
  cursor: move;
  color: #ffffff;
  height: 16px;
  width: 26px;
  padding: 3px 3px 3px 4px;
  border-radius: 7px 0px 0px 7px;
  border: 1px solid #1a8e9b;
  transition: padding-left 0.3s cubic-bezier(0.32, 1.85, 0.43, 0.43);
}

.insite-handle:hover {
  left: -27px;
  --left: -27px;
  &:before {
    content: "\f0b2";
    padding-left: 5px;
  }
}

@keyframes bounce {
  0% {
    left: var(--left, -14px);
  }
  10% {
    left: var(--left, -20px);
  }
  20% {
    left: var(--left, -14px);
  }
  30% {
    left: var(--left, -20px);
  }
  40% {
    left: var(--left, -14px);
  }
  100% {
    left: var(--left, -14px);
  }
}

.insite-btn {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
  font-family: 'BrixSansBold';
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1rem;
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #b00402;
  border: none;
  margin: 10px 10px 10px auto;
  padding: 7px 10px 7px 34px;
  text-decoration: none;
  text-transform: none;
  box-shadow: #333333 1px 1px 10px;
  background-color: #e3e000;
}

<span class="insite-draggable">
 <i class="insite-handle"></i>
  <a class="insite-btn" href="#">Turn on</a>
</span>

如何防止CSS 动画在过渡后重新启动？

How to prevent CSS animation restart after transition?

html

css

animation

css-transitions

css-animations