<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->

<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body {
    width: 100%;
    height: 100%;
    background: #E91E63;
    font-family: "Roboto", sans-serif;
}

.text {
    height: 100%;
    position: absolute;
    left:50%;
    text-align:center;
    color: white;
}

.words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}

.words-wrapper b {
    opacity: 0;
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
}

.words-wrapper .is-visible {
    position: relative;
    opacity: 1;
    -webkit-animation: push-in 0.6s;
    -moz-animation: push-in 0.6s;
    animation: push-in 0.6s;
}

.words-wrapper .is-hidden {
    -webkit-animation: push-out 0.6s;
    -moz-animation: push-out 0.6s;
    animation: push-out 0.6s;
}

@-webkit-keyframes push-in {
0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
}

70% {
    opacity: 1;
    -webkit-transform: translateX(10%);
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
}
}

@-moz-keyframes push-in {
0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
}

60% {
    opacity: 1;
    -moz-transform: translateX(10%);
}

100% {
    opacity: 1;
    -moz-transform: translateX(0);
}
}

@keyframes push-in {
0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

60% {
    opacity: 1;
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -ms-transform: translateX(10%);
    -o-transform: translateX(10%);
    transform: translateX(10%);
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
}

@-webkit-keyframes push-out {
0% {
    opacity: 1;
    -webkit-transform: translateX(0);
}

60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
}

100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
}
}

@-moz-keyframes push-out {
0% {
    opacity: 1;
    -moz-transform: translateX(0);
}

60% {
    opacity: 0;
    -moz-transform: translateX(110%);
}

100% {
    opacity: 0;
    -moz-transform: translateX(100%);
}
}

@keyframes push-out {
0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
    -moz-transform: translateX(110%);
    -ms-transform: translateX(110%);
    -o-transform: translateX(110%);
    transform: translateX(110%);
}

100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size:24px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<div class="text ">
  <h1 class="center">Hello, I'm a<br>
    		<span class="words-wrapper">
        <b class="is-visible">developer</b>
        <b>javascript enthusiast</b>
        <b>coffee lover</b>
        <b>dreamer</b>
		    </span>
   </h1>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var isLast = function (word) {
    return $(word).next().length > 0 ? false : true;
}

var getNext = function (word) {
    return $(word).next();
}

var getVisible = function () {
    return document.getElementsByClassName('is-visible');
}

var getFirst = function () {
    var node = $('.words-wrapper').children().first();
    return node;
}

var switchWords = function (current, next) {
    $(current).removeClass('is-visible').addClass('is-hidden');
    $(next).removeClass('is-hidden').addClass('is-visible');
}

var getStarted = function () {
    //We start by getting the visible element and its sibling
    var first = getVisible();
    var next = getNext(first);

    //If our element has a sibling, it's not the last of the list. We switch the classes
    if (next.length !== 0) {
        switchWords(first, next);
    } else {

        //The element is the last of the list. We remove the visible class of the current element
        $(first).removeClass('is-visible').addClass('is-hidden');

        //And we get the first element of the list, and we give it the visible class. And it starts again.
        var newEl = getFirst();
        $(newEl).removeClass('is-hidden').addClass('is-visible');
    }

}

var init = function () {
    setInterval(function () { getStarted() }, 2000);
}

init();
</script><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>