Add Animate Smoothly Between Two Background Colors as a css til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_701 TILs and counting..._
+_702 TILs and counting..._
 
 ---
 
@@ -89,6 +89,7 @@ _701 TILs and counting..._
 ### CSS
 
 - [Add Fab Icons To Your Site With FontAwesome 5](css/add-fab-icons-to-your-site-with-fontawesome-5.md)
+- [Animate Smoothly Between Two Background Colors](css/animate-smoothly-between-two-background-colors.md)
 - [Apply Styles To The Last Child Of A Specific Type](css/apply-styles-to-the-last-child-of-a-specific-type.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)

css/animate-smoothly-between-two-background-colors.md

@@ -0,0 +1,38 @@
+# Animate Smoothly Between Two Background Colors
+
+CSS animations allow you to set up simple rules that the rendering engine
+can then apply to create smooth transitions between style states.
+
+To smoothly transition between two background colors, we can create a
+keyframes at-rule with a fitting name (e.g. `pulse`).
+
+```css
+@keyframes pulse {
+  0% {
+    background-color: red;
+  }
+  50% {
+    background-color: blue;
+  }
+  100% {
+    background-color: red;
+  }
+}
+```
+
+Over the course of a single animation, this set of rules will start the
+background color at red, transition to blue 50% of the way through, and then
+back to red again.
+
+We can then apply this animation within any of our CSS class definitions.
+
+```css
+.square1 {
+  animation: pulse 2s infinite;
+  width: 100px;
+  height: 100px;
+}
+```
+
+Anything with a class of `square1` will have a width and height of `100px`
+as well as a pulsing background color.