Ana Tudor 🐯: "#tinyCSStip Simplifying animat…" - Mastodon

Ana Tudor @anatudor@mastodon.social

#tinyCSStip Simplifying animations with variables and mathematical functions.

Same result, just not writing almost the same `text-shadow` a bunch of times in a bunch of keyframes.

Live test on @codepen https://codepen.io/thebabydino/pen/MYWXgdZ

#CSS #Maths #code #coding #frontend #web #dev #webDev #webDevelopment
#cssMaths #trigonometry

Old CSS

```
.my-elem { animation: glow 5s ease-in-out infinite }

/* repeating most of the shadow so many times */
@keyframes glow {
0% { text-shadow: 0 0 5em red /* hsl( 0 100% 50%) */ }
16.7% { text-shadow: 0 0 1em yellow /* hsl( 60 100% 50%) */ }
33.3% { text-shadow: 0 0 5em lime /* hsl(120 100% 50%) */ }
50% { text-shadow: 0 0 1em cyan /* hsl(180 100% 50%) */ }
66.7% { text-shadow: 0 0 5em blue /* hsl(240 100% 50%) */ }
83.3% { text-shadow: 0 0 1em magenta/* hsl(300 100% 50%) */ }
100% { text-shadow: 0 0 5em red /* hsl(360 100% 50%) */ }
}
```

New CSS

```
@property --hue {
syntax: '<angle>';
initial-value: 0deg;
inherits: false
}

.my-elem { /* no repetition */
text-shadow: 0 1px calc(3em + 2em*cos(var(--hue))) hsl(var(--hue) 100% 50%);
animation: hue 5s linear infinite
}

@keyframes hue { to { --hue: 1turn } }
```

Mar 24, 2025, 08:50 AM·

1boost·5favorites

Drag & drop to upload