diff --git a/static/css/chiscore.css b/static/css/chiscore.css
index 5c9ec80..cda517c 100644
--- a/static/css/chiscore.css
+++ b/static/css/chiscore.css
@@ -350,10 +350,23 @@ select.select2.sign-up-input {
   margin-right: .75%;
  }
 
+#check-in-reminder-container { height: 1.5em; }
+
 #check-in-reminder {
   margin-left: 0.25em;
   color: #d22027;
-  display: none;
+  background-color: #d22027;
+}
+
+#check-in-reminder.visible {
+  background-color: white;
+  transition: background-color 0.25s;
+  opacity: 1;
+}
+
+#check-in-reminder.hidden {
+  opacity: 0;
+  transition: opacity 0.25s linear;
 }
 
 input[type="tel"],
diff --git a/templates/checkpoint.erb b/templates/checkpoint.erb
index 8b5dfd8..40ad4fa 100644
--- a/templates/checkpoint.erb
+++ b/templates/checkpoint.erb
@@ -3,8 +3,10 @@
   <form id="checkin" type="post">
     <h2>Check-In at <%= checkpoint.name %></h2>
 
-    <div id="check-in-reminder">
-      <strong>Important:&nbsp;</strong>Click "Check In" to complete the check in for this team.
+    <div id="check-in-reminder-container">
+      <div id="check-in-reminder" class="hidden">
+        <strong>Important:&nbsp;</strong>Click "Check In" to complete the check in for this team.
+      </div>
     </div>
 
     <select id="team_checkin" name="team-number" placeholder="Enter a team name or number" class='select2 sign-up-input'>
@@ -28,7 +30,14 @@
     var form = $('form#checkin');
 
     input.select2({ placeholder: "Select a team", allowClear: true });
-    input.on('select2:select', function() { reminder.show() });
-    form.on('submit', function() { reminder.hide() });
+    input.on('select2:select', function() { 
+      reminder.removeClass('hidden').addClass('visible') 
+    });
+
+    form.on('submit', function() { 
+      reminder.fadeOut(250, function() {
+        reminder.show().removeClass('visible').addClass('hidden')
+      });
+    });
   });
 </script>