diff --git a/README.md b/README.md index c7bf18a..1c2ae2b 100644 --- a/README.md +++ b/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) diff --git a/css/create-a-pulsing-background-with-css-animation.md b/css/create-a-pulsing-background-with-css-animation.md new file mode 100644 index 0000000..4070c12 --- /dev/null +++ b/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/)