diff --git a/examples/counter/index.html b/examples/counter/index.html
index 696101a5..db914d58 100644
--- a/examples/counter/index.html
+++ b/examples/counter/index.html
@@ -1,6 +1,18 @@
 <html>
   <head>
     <title>Redux Counter Example</title>
+    <style>
+      /* unsure how to represent this in js, so it stays here for now */
+      @-webkit-keyframes fadeIn {
+        from { opacity: 0; }
+        100% { opacity: 1; }
+      }
+
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        100% { opacity: 1; }
+      }
+    </style>
   </head>
   <body>
     <div id="root">
diff --git a/src/react/LogMonitorEntry.js b/src/react/LogMonitorEntry.js
index ae6305b4..a2e8151b 100644
--- a/src/react/LogMonitorEntry.js
+++ b/src/react/LogMonitorEntry.js
@@ -9,6 +9,16 @@ const styles = {
   },
   tree: {
     paddingLeft: 0
+  },
+  animated: {
+    WebkitAnimationDuration: '0.2s',
+    animationDuration: '0.2s',
+    WebkitAnimationFillMode: 'both',
+    animationFillMode: 'both'
+  },
+  fadeIn: {
+    WebkitAnimationName: 'fadeIn',
+    animationName: 'fadeIn'
   }
 };
 
@@ -64,7 +74,7 @@ export default class LogMonitorEntry {
       cursor: (index > 0) ? 'pointer' : 'default'
     };
     return (
-      <div style={{textDecoration: collapsed ? 'line-through' : 'none'}}>
+      <div style={{ ...styles.animated, ...styles.fadeIn, textDecoration: collapsed ? 'line-through' : 'none'}}>
         <LogMonitorEntryAction
           theme={this.props.theme}
           collapsed={collapsed}
