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

Question

我做了一个按钮，它有一个小标签，当悬停在它上面时，它会扩展到一边。它之所以存在，是因为我希望按钮是可拖动的。因此，一旦选项卡展开，您就可以抓住它并拖动按钮。不要介意损坏的图标，它们应该来自字体真棒包。

但是我想通知用户，可以抓取小选项卡，所以我在空闲时做了一个小抖动效果，播放两次表示选项卡可以扩展。一旦用户将鼠标悬停在它上面，它就会完全展开。但是，当用户取消悬停选项卡时，动画将再次开始。我需要动画仅在页面加载时启动，并且恰好出现 2 次，再也不会出现。为什么动画在悬停时过渡后开始，我该怎么做才能禁止它再次动画化？没有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>