仅页面加载时的 CSS3 关键帧动画？

Question

我这里有一个配置文件按钮，它可以在其中进行动画处理，并在悬停时执行不同的动画。然而，当我的鼠标离开元素时，入口动画会重复。有没有办法确保每次页面加载只触发一次动画？

.profile {
width: 125px;
height: 125px;
background-image: url(graphics/profile1.jpg);
border-style: solid;
border-color: white;
border-radius: 50%;
margin-left: 80px;
outline: 1px solid transparent;
float: left;
animation: popIn 1s;
}

.profile:hover{
width: 125px;
height: 125px;
border-style: solid;
border-color: red;
box-shadow: 0 0 0 0 rgba(155, 0, 2, 0.6);
border-radius: 50%;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes popIn{
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

Answer 1

这是一个类似问题的链接，可能会对您有所帮助。

Run CSS3 animation only once (at page loading)

我个人会在 div 中添加一个额外的类来处理所有入口动画，然后在光标在 div 内移动时使用 javascript 删除该类。我会做一个 js fiddle 给你看一个例子，给我几分钟。

修改小提琴链接：https://jsfiddle.net/0uaktv10/

html:

<div class="profile load-in" style="background: blue; width: 100px; height: 100px;"></div>

CSS：

    enter .profile {
width: 125px;
height: 125px;
background-image: url(graphics/profile1.jpg);
border-style: solid;
border-color: white;
border-radius: 50%;
margin-left: 80px;
outline: 1px solid transparent;
float: left;
}

.load-in {
  animation: popIn 1s;
}

.profile:hover{
width: 125px;
height: 125px;
border-style: solid;
border-color: red;
box-shadow: 0 0 0 0 rgba(155, 0, 2, 0.6);
border-radius: 50%;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes popIn{
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

jQuery：

$(".profile").hover(function(){
    $(".profile").removeClass("load-in")
})