Fade-in for page load? Maybe?

web/css/style.css

@@ -66,8 +66,22 @@ li a, .navbar-brand {
 table {
 	color: #226C1B;
 }
-/*textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
-    border-color: #62AC5B;
-    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px #29d257;
-    outline: 0 none;
-}*/
+
+@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+
+.fade_in {
+	 opacity: 0;
+   -webkit-animation: fadeIn ease-in-out 1;
+   -moz-animation: fadeIn ease-in-out 1;
+   animation: fadeIn ease-in-out 1;
+
+   -webkit-animation-fill-mode: forwards;
+   -moz-animation-fill-mode: forwards;
+   animation-fill-mode: forwards;
+
+   -webkit-animation-duration: 1s;
+   -moz-animation-duration: 1s;
+   animation-duration: 1s;
+}

web/pages/about.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>About</h1>
   <h2>(insert stuff here)</h2>
 </center>

web/pages/chat.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>EasyCTF IRC</h1>
   <h2>(Insert iFrame with IRC here)</h2>
 </center>

web/pages/home.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>EasyCTF 3</h1>
   <h3 style="color: #44783f;"> Coming 2016 </h3>
   <br>

web/pages/login.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
 <h1>Log-in</h1>
 <div class="input-group">
 	<form id="login-form">

web/pages/problems.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>Problems</h1>
   <div class="panel panel-info">
     <div class="panel-heading">

web/pages/programming.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>Programming</h1>
   <div class="panel panel-default">
     <div class="panel-heading">

web/pages/register.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
 <h1 class="ui dividing header">Register</h1>
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 <script src="js/register.js"></script>

web/pages/rules.html

@@ -1,6 +1,5 @@
-<center>
-  <h1> Info </h1>
-</center>
+<center class="fade_in">
+<h1> Info </h1>
 
 <h2>Rules</h2>
 Here are the rules regarding EasyCTF. Please follow these rules to make sure everyone has a fair chance at winning.
@@ -29,3 +28,4 @@ If you don't live in the United States, or you're not a high school or middle sc
 2nd Place: $256<br>
 3rd Place: $128<br>
 Top 20: Laptop Stickers<br>
+</center>

web/pages/scoreboard.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>Scoreboard</h1>
   <table class="table">
       <thead>

web/pages/shell.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>Shell</h1>
   <div class="panel panel-default">
     <div class="panel-heading">

web/pages/updates.html

@@ -1,4 +1,4 @@
-<center>
+<center class="fade_in">
   <h1>News / Updates</h1>
   <a class="twitter-timeline" href="https://twitter.com/easyctf" data-widget-id="680792667001884672">Tweets by @easyctf</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 </center>