+++
date    = "2022-12-14T01:58:03+00:00"
lastmod = "2022-12-14T01:58:03+00:00"
tags    = [ "webdev", "gists" ]
author  = "tdro"
+++

It's kinda neat how
[CSS animation rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
are sort of simple in their {{< animate hang construction >}}.
{{< abbr imo "in my opinion" >}}, rules could be made even simpler if the
[`animation-delay`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)
property also allowed delays between iterations/intervals instead of at the
start only. Interval delays could allow for writing drastically less key frame
rules.

```css {caption="Combining two key frame animations to create a hanging effect."}
text-animation[hang] {
  animation: tilt-rightward 1.3s infinite, tilt-leftward 1.8s infinite;
}
```