Why does Firefox replay css animations in reverse? - html

Question

As shown in the codepen below, the nav a links fade in as they should, but then when hovered they seem to replay the animation in reverse and then forward again really quickly. It's really odd. http://codepen.io/mildrenben/pen/wBMVdm
<header>
<h1>BEN MILDREN</h1>
<p>Designer and Developer</p>
</header>
<nav>
<a>About</a>
<a>Portfolio</a>
<a>Blog</a>
<a>Contact</a>
</nav>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700,800|Gentium+Book+Basic:400,400italic,700italic' rel='stylesheet' type='text/css'>
CSS:
html, body {
width: 100%;
height: 100%;
}
body {
background: url(https://ununsplash.imgix.net/reserve/D9xlw7UxTBqQw5sLf8cJ_reef%20insp-72.jpg?q=75&fm=jpg&s=a46f72e373f7af2b3bba993f565e24be);
background-size: cover;
}
* {
margin: 0;
}
$color: #4C5C58;
$color-light: #5B6B67;
header {
position: absolute;
top: 27%;
left: calc(50% - 182px);
text-align: center;
-webkit-animation: anim2 1s ease-in-out 2.5s forwards;
}
#-webkit-keyframes anim1 {
100% {
transform: translateY(-12px);
opacity: 1;
}
}
#-webkit-keyframes anim2 {
100% {
transform: translateY(-70px);
}
}
#keyframes anim1 {
100% {
transform: translateY(-12px);
opacity: 1;
}
}
#keyframes anim2 {
100% {
transform: translateY(-70px);
}
}
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 56px;
font-weight: 800;
color: $color;
opacity: 0;
-webkit-animation: anim1 1.5s ease-in-out forwards;
animation: anim1 1.5s ease-in-out forwards;
}
p {
font-family: 'Gentium Book Basic', serif;
font-style: italic;
font-size: 20px;
color: $color-light;
opacity: 0;
-webkit-animation: anim1 1.5s ease-in-out 0.3s forwards;
}
nav {
position: absolute;
left: calc(50% - 183px);
top: 45%;
}
a {
height: 40px;
width: auto;
background: none;
margin: 0 20px;
border: none;
cursor: pointer;
font-family: 'Gentium Book Basic', sans-serif;
font-weight: 500;
font-size: 15px;
color: $color-light;
transition: all 0.3s ease-in-out;
line-height: 50px;
opacity: 0;
display: inline-block;
}
a:hover {
border-bottom: double 3px $color-light;
}
img {
width: 150px;
position: absolute;
margin-left: 72px;
top: 38px;
}
nav p {
font-style: italic;
font-size: 14px;
position: absolute;
top: 80px;
left: 100px;
}
a:nth-of-type(1) {
-webkit-animation: anim1 1s ease-in-out 3s forwards;
animation: anim1 1s ease-in-out 3s forwards;
}
a:nth-of-type(2) {
-webkit-animation: anim1 1s ease-in-out 3.1s forwards;
animation: anim1 1s ease-in-out 3.1s forwards;
}
a:nth-of-type(3) {
-webkit-animation: anim1 1s ease-in-out 3.2s forwards;
animation: anim1 1s ease-in-out 3.2s forwards;
}
a:nth-of-type(4) {
-webkit-animation: anim1 1s ease-in-out 3.3s forwards;
animation: anim1 1s ease-in-out 3.3s forwards;
}