diff --git a/README.md b/README.md index 1f57759..125e716 100644 --- a/README.md +++ b/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) diff --git a/css/animate-smoothly-between-two-background-colors.md b/css/animate-smoothly-between-two-background-colors.md new file mode 100644 index 0000000..e9d1872 --- /dev/null +++ b/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.