CSS3 Keyframe Animationはページの読み込みのみですか？

Question

私がここに持っているのは、アニメーションを生成し、ホバー上で別のアニメーションを実行するプロファイルボタンです。しかし、マウスが要素を離れると、入り口のアニメーションが繰り返されます。アニメーションが1ページに1回だけ読み込まれるようにする方法はありますか？

.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の内側にカーソルが移動したら、そのクラスを削除するにはJavaScriptを使用して、すべての入り口のアニメーションを扱うのdivに追加のクラスを追加します。私はjsのフィドルを作って、あなたに例を見せてくれるでしょう、ちょうど私に数分を与えてください。

フィドルリンクの編集：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：[ファイル名を指定して実行CSS3アニメーションの

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