{"id":13714,"date":"2011-08-20T11:21:43","date_gmt":"2011-08-20T18:21:43","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13714"},"modified":"2022-09-22T12:37:31","modified_gmt":"2022-09-22T19:37:31","slug":"animation","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/","title":{"rendered":"animation"},"content":{"rendered":"\n<p>The <code>animation<\/code> property in CSS can be used to animate many other CSS properties such as <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//c//color///"><code>color<\/code><\/a>, <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//background-color///"><code>background-color<\/code><\/a>, <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//h//height///"><code>height<\/code><\/a>, or <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//w//width///"><code>width<\/code><\/a>. Each animation needs to be defined with the <code>@keyframes<\/code> <a href=https://css-tricks.com/"https:////css-tricks.com//at-rule-css///">at-rule<\/a> which is then called with the <code>animation<\/code> property, like so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  animation: pulse 5s infinite;\n}\n\n@keyframes pulse {\n  0% {\n    background-color: #001F3F;\n  }\n  100% {\n    background-color: #FF4136;\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZGYZBx\" src=https://css-tricks.com/"////codepen.io//anon//embed//ZGYZBx?height=450&amp;theme-id=1&amp;slug-hash=ZGYZBx&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZGYZBx\" title=\"CodePen Embed ZGYZBx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Each <code>@keyframes<\/code> at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand <code>animation<\/code> property, or its eight sub-properties, to give more control over how those keyframes should be manipulated.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"subproperties\">Sub-properties<\/h3>\n\n\n<ul><li><code>animation-name<\/code>: declares the name of the <code>@keyframes<\/code> at-rule to manipulate.<\/li><li><code>animation-duration<\/code>: the length of time it takes for an animation to complete one cycle.<\/li><li><code>animation-timing-function<\/code>: establishes preset acceleration curves such as <code>ease<\/code> or <code>linear<\/code>.<\/li><li><code>animation-delay<\/code>: the time between the element being loaded and the start of the animation sequence (<a href=https://css-tricks.com/"https:////twitter.com//jh3yy//status//1246533538884845568/" rel=\"noopener\">cool examples<\/a>). <\/li><li><code>animation-direction<\/code>: sets the direction of the animation after the cycle. Its default resets on each cycle.<\/li><li><code>animation-iteration-count<\/code>: the number of times the animation should be performed.<\/li><li><code>animation-fill-mode<\/code>: sets which values are applied before\/after the animation.<br>For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.<\/li><li><code>animation-play-state<\/code>: pause\/play the animation.<\/li><\/ul>\n\n\n\n<p>These sub-properties can then be used like so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes stretch {\n  \/* declare animation actions here *\/\n}\n\n.element {\n  animation-name: stretch;\n  animation-duration: 1.5s; \n  animation-timing-function: ease-out; \n  animation-delay: 0s;\n  animation-direction: alternate;\n  animation-iteration-count: infinite;\n  animation-fill-mode: none;\n  animation-play-state: running; \n}\n\n\/*\n  is the same as:\n*\/\n\n.element {\n  animation: \n    stretch\n    1.5s\n    ease-out\n    0s\n    alternate\n    infinite\n    none\n    running;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_EjaJNd\" src=https://css-tricks.com/"////codepen.io//anon//embed//EjaJNd?height=450&amp;theme-id=1&amp;slug-hash=EjaJNd&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed EjaJNd\" title=\"CodePen Embed EjaJNd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s a full list of which values each of these sub-properties can take:<\/p>\n\n\n\n<figure class=\"wp-block-table chart\"><table><tbody><tr><td><code>animation-timing-function<\/code><\/td><td>ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))<\/td><\/tr><tr><td><code>animation-duration<\/code><\/td><td>Xs or Xms<\/td><\/tr><tr><td><code>animation-delay<\/code><\/td><td>Xs or Xms<\/td><\/tr><tr><td><code>animation-iteration-count<\/code><\/td><td>X<\/td><\/tr><tr><td><code>animation-fill-mode<\/code><\/td><td>forwards, backwards, both, none<\/td><\/tr><tr><td><code>animation-direction<\/code><\/td><td>normal, alternate<\/td><\/tr><tr><td><code>animation-play-state<\/code><\/td><td>paused, running, running<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"multiple-steps\">Multiple steps<\/h3>\n\n\n<p>If an animation has the same starting and ending properties, it&#8217;s useful to comma-separate the 0% and 100% values inside <code>@keyframes<\/code>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes pulse {\n  0%, 100% {\n    background-color: yellow;\n  }\n  50% {\n    background-color: red;\n  }\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"multiple-animations\">Multiple animations<\/h3>\n\n\n<p>You can comma-separate the values to declare multiple animations on a selector as well. In the example below, we want to change the color of the circle in a <code>@keyframe<\/code> whilst also nudging it from side to side with another.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  animation: \n    pulse 3s ease infinite alternate, \n    nudge 5s linear infinite alternate;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_c6d27fda8e1244d44bf04728049d7c1d\" src=https://css-tricks.com/"////codepen.io//anon//embed//c6d27fda8e1244d44bf04728049d7c1d?height=450&amp;theme-id=1&amp;slug-hash=c6d27fda8e1244d44bf04728049d7c1d&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed c6d27fda8e1244d44bf04728049d7c1d\" title=\"CodePen Embed c6d27fda8e1244d44bf04728049d7c1d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"performance\">Performance<\/h3>\n\n\n<p>Animating most properties <a href=https://css-tricks.com/"http:////www.html5rocks.com//en//tutorials//speed//high-performance-animations///" rel=\"noopener\">is a performance concern<\/a>, so we should proceed with caution before animating any property. However, there are certain combinations that can be animated safely:<\/p>\n\n\n\n<ul><li><code>transform: translate()<\/code><\/li><li><code>transform: scale()<\/code><\/li><li><code>transform: rotate()<\/code><\/li><li><code>opacity<\/code><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"which-properties-can-be-animated\">Which properties can be animated?<\/h3>\n\n\n<p>MDN has <a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//CSS_animated_properties/" rel=\"noopener\">a list of CSS properties which can be animated<\/a>. Animatable properties tend to colors and numbers. An example a non-animatable property is <code>background-image<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=https://css-tricks.com/"http:////caniuse.com//#feat=css-animation\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">5*<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">126<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">6.0-6.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en//css//css_animations/" rel=\"noopener\">Using CSS animations<\/a> (MDN)<\/li><li><a href=https://css-tricks.com/"http:////dev.w3.org//csswg//css-animations-1///" rel=\"noopener\">CSS Animations Level 1<\/a> (W3C specification)<\/li><li><a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//css-animation-shorthand?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\%22 rel=\"noopener\">CSS Animation Shorthand Property<\/a> (DigitalOcean)<\/li><li><a href=https://css-tricks.com/"http:////alistapart.com//article//web-animation-at-work/" rel=\"noopener\">Web animation at work<\/a> (A List Apart)<\/li><li><a href=https://css-tricks.com/"http:////24ways.org//2014//five-ways-to-animate-responsibly///" rel=\"noopener\">Five ways to animate responsibly<\/a> (24 Ways)<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-tricks\">Related tricks!<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2016-05-02\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 30, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//comparison-animation-technologies///">\n      A Comparison of Animation Technologies    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//sdrasner///" aria-label=\"Author page of Sarah Drasner\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//48cfd8342f9b9e5b7970f63afb0a8ee3?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/48cfd8342f9b9e5b7970f63afb0a8ee3?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//sdrasner///">\n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-13714\">\n\n  <time datetime=\"2020-08-21\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 21, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//a-css-only-animated-wrapping-underline///">\n      A CSS-only, animated, wrapping underline    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2021-11-26\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 29, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//a-handy-little-system-for-animated-entrances-in-css///">\n      A Handy Little System for Animated Entrances in CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//nealevanfleet///" aria-label=\"Author page of Neale Van Fleet\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//d7a76198094edbb412cf4d525b16d545?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/d7a76198094edbb412cf4d525b16d545?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//nealevanfleet///">\n      Neale Van Fleet    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2020-06-02\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 2, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//a-new-way-to-delay-keyframes-animations///">\n      A New Way to Delay Keyframes Animations    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//eric-d-johnson///" aria-label=\"Author page of Eric Johnson\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//644cbcea851c28e442e53214f5ea7c66?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/644cbcea851c28e442e53214f5ea7c66?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//eric-d-johnson///">\n      Eric Johnson    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2021-05-13\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 13, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//advanced-css-animation-using-cubic-bezier///">\n      Advanced CSS Animation Using cubic-bezier()    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///" aria-label=\"Author page of Temani Afif\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//2c12e74c8162614e08a31d704ed9e193?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/2c12e74c8162614e08a31d704ed9e193?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//afiftemani///">\n      Temani Afif    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2012-12-20\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 3, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//tale-of-animation-performance///">\n      A Tale of Animation Performance    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2020-09-22\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 22, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//accessible-web-animation-the-wcag-on-animation-explained///">\n      Accessible Web Animation: The WCAG on Animation Explained    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//valhead///" aria-label=\"Author page of Val Head\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//48544d7b14d3544427909d5ddb330e76?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/48544d7b14d3544427909d5ddb330e76?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//valhead///">\n      Val Head    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-13714\">\n\n  <time datetime=\"2020-11-03\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 3, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//additive-animations-in-css///">\n      Additive Animations in CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2012-01-26\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 31, 2014  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animate-to-an-inline-style///">\n      Animate to an Inline Style    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2017-01-20\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 7, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animate-different-end-states-using-one-set-css-keyframes///">\n      Animate to Different End States Using One Set of CSS Keyframes    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///" aria-label=\"Author page of Ana Tudor\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//bee436794e066a5423040cf673c7506f?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/bee436794e066a5423040cf673c7506f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//thebabydino///">\n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card advanced\" id=\"mini-post-13714\">\n\n  <time datetime=\"2011-01-24\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 24, 2011  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animated-knockout-letters///">\n      Animated Knockout Letters    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2020-02-27\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 27, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animated-matryoshka-dolls-in-css///">\n      Animated Matryoshka Dolls in CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//jheytompkins///" aria-label=\"Author page of Jhey Tompkins\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//579323ef7b832ca91f2202b8da9ce2b7?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/579323ef7b832ca91f2202b8da9ce2b7?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//jheytompkins///">\n      Jhey Tompkins    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2019-10-27\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 28, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animated-position-of-focus-ring///">\n      Animated Position of Focus Ring    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-13714\">\n\n  <time datetime=\"2018-04-03\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 3, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animated-svg-radial-progress-bars///">\n      Animated SVG Radial Progress Bars    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//robinrendle///" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2019//01//me-black-white.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//robinrendle///">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-13714\">\n\n  <time datetime=\"2013-12-07\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 24, 2014  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animated-svgs///">\n      Animated SVGs    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2017-12-05\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 6, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-border///">\n      Animating Border    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//shshaw///" aria-label=\"Author page of Stephen Shaw\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7c4dc6deb1a5c91d9c6ff74c8595b51d?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7c4dc6deb1a5c91d9c6ff74c8595b51d?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//shshaw///">\n      Stephen Shaw    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-13714\">\n\n  <time datetime=\"2020-03-05\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 17, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-css-width-and-height-without-the-squish-effect///">\n      Animating CSS Width and Height Without the Squish Effect    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2020-10-09\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 9, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-number-counters///">\n      Animating Number Counters    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//carterli///" aria-label=\"Author page of Carter Li\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2020//09///u5fae/u4fe1/u56fe/u7247_202010010819581.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//carterli///">\n      Carter Li    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2014-04-17\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 7, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-svg-css///">\n      Animating SVG with CSS    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-13714\">\n\n  <time datetime=\"2021-02-08\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 8, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-a-css-gradient-border///">\n      Animating a CSS Gradient Border    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2015-11-02\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 24, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-the-content-property///">\n      Animating the `content` Property    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//robinrendle///" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2019//01//me-black-white.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//robinrendle///">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2021-10-04\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 4, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animation-techniques-for-adding-and-removing-items-from-a-stack///">\n      Animation Techniques for Adding and Removing Items From a Stack    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//outlook-com///" aria-label=\"Author page of Luke Courtney\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2021//09//85fbb25df52674b2c5e6-scaled.jpg?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//outlook-com///">\n      Luke Courtney    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2013-10-03\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 3, 2013  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animation-css-triangles-work///">\n      Animation of How CSS Triangles Work    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2011-03-22\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 20, 2012  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//comma-separated-webkit-animation-keyframes///">\n      Comma Separated WebKit Animation Keyframes    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2013-09-17\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 13, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//controlling-css-animations-transitions-javascript///">\n      Controlling CSS Animations and Transitions with JavaScript    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//zachsaucier///" aria-label=\"Author page of Zach Saucier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//44128d17e23187413cded5010698ecb8?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/44128d17e23187413cded5010698ecb8?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//zachsaucier///">\n      Zach Saucier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2015-11-20\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 10, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//creating-an-animated-menu-indicator-with-css-selectors///">\n      Creating an Animated Menu Indicator with CSS Selectors    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//jnowland///" aria-label=\"Author page of James Nowland\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//b37d8c7d5232b68041aa234a5c9b28dd?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/b37d8c7d5232b68041aa234a5c9b28dd?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//jnowland///">\n      James Nowland    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2019-07-22\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 22, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-animation-libraries///">\n      CSS Animation Libraries    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2014-01-16\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 7, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-animation-tricks///">\n      CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//zachsaucier///" aria-label=\"Author page of Zach Saucier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//44128d17e23187413cded5010698ecb8?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/44128d17e23187413cded5010698ecb8?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//zachsaucier///">\n      Zach Saucier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2018-11-15\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 15, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-animations-and-transitions-in-email///">\n      CSS Animations and Transitions in Email    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2017-06-13\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 18, 2018  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-animations-vs-web-animations-api///">\n      CSS Animations vs Web Animations API    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//olliew///" aria-label=\"Author page of Ollie Williams\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b27d41bc94bc689f23c33aa62157dcb?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b27d41bc94bc689f23c33aa62157dcb?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//olliew///">\n      Ollie Williams    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-13714\">\n\n  <time datetime=\"2013-08-27\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 27, 2013  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//css-animate-fromto-auto///">\n      CSS Animate from\/to &#8220;auto&#8221;    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-13714\">\n\n  <time datetime=\"2015-12-10\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 10, 2015  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//using-multi-step-animations-transitions///">\n      Using Multi-Step Animations and Transitions    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//1a1b5ca4b139c0c8caaea26ef437d943?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//geoffgraham///">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-13714\">\n\n  <time datetime=\"2015-08-22\" title=\"Originally published Aug 20, 2011\">\n    <strong>\n                \n      Snippet\n      <\/strong>\n\n    on\n\n    Aug 24, 2015  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//snippets//css//shake-css-keyframe-animation///">\n      &#8220;Shake&#8221; CSS Keyframe Animation    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=https://css-tricks.com/"https:////css-tricks.com//tag//animation///" rel=\"tag\">animation<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//sdrasner///" aria-label=\"Author page of Sarah Drasner\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//48cfd8342f9b9e5b7970f63afb0a8ee3?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/48cfd8342f9b9e5b7970f63afb0a8ee3?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//sdrasner///">\n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13712,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[612],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13714"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13714"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13714\/revisions"}],"predecessor-version":[{"id":373696,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13714\/revisions\/373696"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13712"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13714"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}