CSS3 Keyframe Animation on page load only? - html

Question

What I have here is a profile button that animates in, and performs a different animation on hover. However the entrance animation repeats when my mouse leaves the element. Is there a way to make sure that an animation is only triggered once per page load?
.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

Here is a link to a similar question that might help you out.
Run CSS3 animation only once (at page loading)
Personally I would add an extra class to the div that handles all the entrance animations and then use javascript to remove that class once the cursor moves inside the div. I'll make a js fiddle and show you an example, just give me a few minutes.
Edit for fiddle link: 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")
})