Aisling

So I was inspect-elementing on my spinning train animation, and the style showed up as animation: 6s linear 0s infinite normal none running spin. Now the 6s means "do a complete rotation every six seconds", but I had no idea what the 0s meant, so I fiddled around with it, and it turns out that's the number that specifies how many seconds to wait before beginning the animation. So if you set it to 10s then you have an animation that begins ten seconds after it appears.

Check it out: this code makes it so that when you open the <details> element, the train waits ten seconds and then starts spinning.

<details>
<summary>Click here to open</summary>
<div style="text-align: center; animation: 6s linear 10s infinite normal none running spin">
🚂
</div>
</details>

I found some other thingies you can replace it with.

So instead of "linear":

<div style="text-align: center; animation: 6s linear 0s infinite normal none running spin">
🚂
</div>

You can do "ease-in-out" to make the train do a flip like a gymnast:

<div style="text-align: center; animation: 6s ease-in-out 0s infinite normal none running spin">
🚂
</div>

You can also use something called a cubic-bezier to do more complicated movements. Here I'm just copy-pasting cubic-bezier(0.1, -0.6, 0.2, 0) from the same Mozilla page I linked above

<div style="text-align: center; animation: 6s cubic-bezier(0.1, -0.6, 0.2, 0) 0s infinite normal none running spin">
🚂
</div>

Now I'll admit I do not understand what a cubic-bezier is. I'd have to actually do some research. But this could offer some fine-tuned customization options for css animations on Cohost.

Here's a forest scene with the Cohost default line height of 1.75:

<div style="text-align:center">
🌳🌳 🌳<br>
🌳🌳 🪨🌳🌳🌲 &nbsp; 🌲🌲🌳<br>
🌳🌳 🌲 &nbsp; 🌳🪨🏚️🌲🌲🌲 &nbsp; 🌳🌲🌳🌳🌳<br>
🌳🌳 🌳🌲🌲🦌🌳<br>
🌳 🌳
</div>

Here's the same scene with the line height reduced to 1:

<div style="text-align:center; line-height: 1">
🌳🌳 🌳<br>
🌳🌳 🪨🌳🌳🌲 &nbsp; 🌲🌲🌳<br>
🌳🌳 🌲 &nbsp; 🌳🪨🏚️🌲🌲🌲 &nbsp; 🌳🌲🌳🌳🌳<br>
🌳🌳 🌳🌲🌲🦌🌳<br>
🌳 🌳
</div>

Here's a line height of 0.7:

<div style="text-align:center; line-height: 0.7">
🌳🌳 🌳<br>
🌳🌳 🪨🌳🌳🌲 &nbsp; 🌲🌲🌳<br>
🌳🌳 🌲 &nbsp; 🌳🪨🏚️🌲🌲🌲 &nbsp; 🌳🌲🌳🌳🌳<br>
🌳🌳 🌳🌲🌲🦌🌳<br>
🌳 🌳
</div>

Set the line height to 0 and we're standing on the ground:

<div style="text-align:center; line-height: 0">
🌳🌳 🌳<br>
🌳🌳 🪨🌳🌳🌲 &nbsp; 🌲🌲🌳<br>
🌳🌳 🌲 &nbsp; 🌳🪨🏚️🌲🌲🌲 &nbsp; 🌳🌲🌳🌳🌳<br>
🌳🌳 🌳🌲🌲🦌🌳<br>
🌳 🌳
</div>

It seems we're not allowed to make the line height negative, which is a real shame because I wanted the punchline to be "oops we clipped through the ground"