.jumbotron {
	height: 100vh;
	text-align: center;
}

h1 {
	padding-top: 20%;
}

input[type=text] {
    width: 250px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}

.navbar-nav > a {
	font-size: 1.25em;
}
@keyframes fadein {
	0% { opacity: 0; }
	25% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes move {
	0% { opacity: 0; padding-top: 30% }
	25% { opacity: 0.5; padding-top: 30%; }
	50% { opacity: 0.75; padding-top: 30% }
	100% { opacity: 1; padding-top: 20% }
}

.jumbotron {
	height: 100vh;
	text-align: center;
}

h1 {
	padding-top: 20%;
	animation: move 2s;
}

form {
	animation: fadein 4s;
}

input[type=text] {
    width: 250px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}

.navbar-nav > a {
	font-size: 1.25em;
}
Add animations to page elements
Add animations to page elements
