Can't get css animations to repeat with infinite

[wonntann]

<title>Euforia</title>

<!-- CSS -->
<link rel="stylesheet" href="style.css">

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

HI, I'M JOHN DOE

PROFESSIONAL DEVELOPER

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Hero Text -->
<script src="hero.js"></script>

external style.css
body, html {
height: 100%;
}

/* HERO IMAGE*/
.hero-image {
background-image: url("images/header.jpg");
background-position: center;
background-repeat: no-repeat;
position: relative;
background-size: cover;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
color: #000000;
}