页面加载动画在鼠标离开时第二次执行 [英] Animation on page load is executed a second time on mouse leave
问题描述
我在包装器（ .avatar ）中使用图像和三个跨度作为兄弟姐妹，以显示一个小头像。我添加了两个动画。动画元素是跨度。它们的动画播放时间稍有延迟。
I use an image and three spans as siblings within a wrapper (.avatar), to display a small avatar. I added two animations. The animated elements are the spans. They are animated with a small delay.
立即执行一个动画（ @keyframes rings-load ）。当 @keyframes会悬停）执行。
One animation is executed immediately (@keyframes rings-load). The other one (@keyframes rings-hover) executes, when .avatar is hovered.
问题：将鼠标悬停在 .avatar 之后，保留元素，初始动画为触发了第二次。这是为什么？什么是防止这种行为的最佳实践？
Problem: After hovering .avatar, leaving the element, the initial animation is triggered a second time. Why is that? What would be considered best practice to prevent this behaviour?
期望：动画铃声加载在页面加载时执行一次，并且不再执行。动画环形悬停在类 .avatar 的元素上的每个悬停都执行一次。
Expected: Animation rings-load executes once on page load and is not executed again. Animation rings-hover executes once on every hover on element with class .avatar.
/* vars */
:root {
--avatar-size: 140px;
}
/* general */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #333;
margin: 0;
padding: 0;
}
main {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
height: 100vh;
}
/* avatar */
.avatar-container {
margin: 2rem;
padding: 21px;
}
.avatar img {
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 100%;
padding: 2px;
cursor: pointer;
}
.avatar span {
border-radius: 100%;
position: absolute;
width: var(--avatar-size);
height: var(--avatar-size);
border: 1px solid #ffffffee;
background: #333;
z-index: -1;
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.avatar span:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.avatar span:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.avatar:hover span {
-webkit-animation: rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation: rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.avatar:hover span:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.avatar:hover span:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
/* animations */
@-webkit-keyframes rings-load {
75% {
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes rings-load {
75% {
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes rings-hover {
0% {
opacity: 0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
50% {
opacity: 1;
}
75% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rings-hover {
0% {
opacity: 0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
50% {
opacity: 1;
}
75% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
<main>
<div class="avatar-container">
<div class="avatar">
<span></span>
<span></span>
<span></span>
<img src="https://picsum.photos/140/140/?17" alt="Avatar Books" />
</div>
</div>
</main>
推荐答案
您的鼠标悬停将重置基本动画。然后，当您将鼠标悬停时，它将再次被应用，因此它会再次播放。
Your hover resets the base animation. Then, when you unhover, it is apllied again, so it plays again.
相反，在悬停时，将新动画添加到前一个动画之上。
Instead, on hover add the new animation on top of the previous one. This will make the animation not to be reset, and the unhover won't trigger it
Alos，您可以忘记Webkit前缀。
Alos, you can forget about webkit prefixes.
/* vars */
:root {
--avatar-size: 140px;
}
/* general */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #333;
margin: 0;
padding: 0;
}
main {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
height: 100vh;
}
/* avatar */
.avatar-container {
margin: 2rem;
padding: 21px;
}
.avatar img {
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 100%;
padding: 2px;
cursor: pointer;
}
.avatar span {
border-radius: 100%;
position: absolute;
width: var(--avatar-size);
height: var(--avatar-size);
border: 1px solid #ffffffee;
background: #333;
z-index: -1;
opacity: 0;
transform: scale(1);
animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-iteration-count: 1;
}
.avatar span:nth-child(2) {
animation-delay: 200ms;
}
.avatar span:nth-child(3) {
animation-delay: 300ms;
}
.avatar:hover span {
animation: rings-load 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
rings-hover 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1;
}
.avatar:hover span:nth-child(2) {
animation-delay: 200ms;
}
.avatar:hover span:nth-child(3) {
animation-delay: 300ms;
}
/* animations */
@-webkit-keyframes rings-load {
75% {
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes rings-load {
75% {
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes rings-hover {
0% {
opacity: 0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
50% {
opacity: 1;
}
75% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rings-hover {
0% {
opacity: 0;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
50% {
opacity: 1;
}
75% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
<main>
<div class="avatar-container">
<div class="avatar">
<span></span>
<span></span>
<span></span>
<img src="https://picsum.photos/140/140/?17" alt="Avatar Books" />
</div>
</div>
</main>
这篇关于页面加载动画在鼠标离开时第二次执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
