<div class="banner-text index">
					<h4>Bienvenido a mi web</h4>
					<h3>Soy Jose Luis</h3>
					<div class="banner-slide">
						<h2 class="bnrtext">Soy un</h2>
						<b>
							<span class="span1">
								Desarrollador web
								<br /> Diseñador web
								<br /> Java developer
								<br /> Gamer
								<br /> Tonto el que
								<br /> lo lea
								<br />
							</span>
						</b>
					</div>
				</div>

.banner-text {
    text-align: center;
    width: 63%;
    margin: 11.9em auto;
    margin-left: 10%;
    padding: 2em 0;
    background: rgba(0, 0, 0, 0.16);
    outline: 6px solid rgba(255, 255, 255, 0.03);
}

.banner-text h3 {
    color: #fff;
    font-size: 6em;
    margin: 0.1em 0 0.3em;
    text-transform: capitalize;
}

.banner-slide {
    width: 48%;
    margin: 0 auto;
}

.banner-text h4 {
    text-transform: capitalize;
    font-size: 3em;
    color: #fff;
    letter-spacing: 6px;
    font-weight: 300;
}

h2.bnrtext {
    color: #fff;
    font-size: 3em;
    float: left;
    margin-left: 20px;
    height: 50px;
    font: 300 40px/50px 'Barlow Condensed';
    width: 100px;
}

b {
    float: left;
    overflow: hidden;
    position: relative;
    height: 50px;
}

span.span1 {
    display: inline-block;
    width: 240px;
    color: #fff;
    position: relative;
    white-space: nowrap;
    text-transform: uppercase;
    font: normal 40px/50px Barlow Condensed, sans-serif;
    font-weight: 600;
    top: 0;
    left: 0;
    -webkit-animation: move 7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
}
div.index{
	z-index: 999;
	position: absolute;
}

@keyframes move {
    0% {
        top: 0px;
    }
    16% {
        top: -50px;
    }
    32% {
        top: -100px;
    }
    48% {
        top: -150px;
    }
    64% {
        top: -200px;
    }

    80%{
        top: -250px;
    }
    100%{
        top: -300px;
    }
}