Add Create A Pulsing Background With CSS Animation as a css til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_877 TILs and counting..._
+_878 TILs and counting..._
 
 ---
 
@@ -97,6 +97,7 @@ _877 TILs and counting..._
 - [Apply Multiple Box Shadows To Single Element](css/apply-multiple-box-shadows-to-single-element.md)
 - [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.md)
 - [Circular Icons With A Massive Border Radius](css/circular-icons-with-a-massive-border-radius.md)
+- [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md)
 - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
 - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
 - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)

css/create-a-pulsing-background-with-css-animation.md

@@ -0,0 +1,34 @@
+# Create A Pulsing Background With CSS Animation
+
+You can create a smoothly pulsing background effect with CSS animations. This
+can be achieved by defining a set of keyframes that start at one background
+color, transitions to another color, and then transitions back to the original
+color.
+
+```css
+@keyframes pulse {
+  0%, 100% {
+    background-color: #f56a3f;
+  }
+  50% {
+    background-color: #9e42b0;
+  }
+}
+```
+
+At the beginning (`0%`) and end (`100%`) we declare the background color to be
+`#f56a3f`. Halfway through (`50%`) it should be `#9e42b0`. The browser will
+animate everything in between.
+
+This can then be applied infinitely with a lengthy duration to give it a real
+smooth feel.
+
+```css
+body {
+  animation: pulse 20s infinite;
+}
+```
+
+Here is a [live example](https://codepen.io/jbranchaud/pen/vYYqQjO).
+
+[source](https://css-tricks.com/almanac/properties/a/animation/)