My web dev students decided they want to do animations and transitions tomorrow, so I made a _really_ stupid example we'll make together.
This combines transition state pseudo selectors (hover, etc) along with arbitrary animations done with keyframes. I'll provide them the source CSS for the smile and then we'll write keyframes together to make the animation.
#teaching
Brian :cupofcoffee: :rss:
npub1a3…9e095
2026-10-28 20:38:08 UTC
Author Public Key
npub1a3g2myrhpgqru20l95ds26cahpayd0t05d98whtuk9amc25e8exss9e095Seen on
wss://relay.momostr.pinkPublished at
2026-10-28 20:38:08 UTCEvent JSON
{
"id": "36100ae367cc4d86fd10503d9b23b57ae5a99464da3b90f28751ae2ee5f10dfc",
"pubkey": "ec50ad90770a003e29ff2d1b056b1db87a46bd6fa34a775d7cb17bbc2a993e4d",
"created_at": 1793219888,
"kind": 1,
"tags": [
[
"proxy",
"https://fosstodon.org/@brianb/117520458589974970",
"web"
],
[
"t",
"teaching"
],
[
"imeta",
"url https://cdn.fosstodon.org/media_attachments/files/117/520/450/797/031/871/original/9912770db34d8240.mp4",
"m video/mp4"
],
[
"proxy",
"https://fosstodon.org/users/brianb/statuses/117520458589974970",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://fosstodon.org/users/brianb/statuses/117520458589974970",
"pink.momostr"
],
[
"-"
]
],
"content": "My web dev students decided they want to do animations and transitions tomorrow, so I made a _really_ stupid example we'll make together.\n\nThis combines transition state pseudo selectors (hover, etc) along with arbitrary animations done with keyframes. I'll provide them the source CSS for the smile and then we'll write keyframes together to make the animation.\n\n#teaching\nhttps://cdn.fosstodon.org/media_attachments/files/117/520/450/797/031/871/original/9912770db34d8240.mp4\n",
"sig": "4ad79499fdfeab83a38117831956fea0db0d9984f7c0ba92c8bb57cf35f95e6960388c748105e05840793058fc5e8eeb6f86c2e31c76b67a100659565d5bb8b9"
}