Aisling

if you were a real friend you'd let me copy your harkness test answers

hands you a piece of paper that just says YES

YES
can you help me with this im not good at reading

picks you up and turns you 180 degrees, fixing nothing

wait. uhhhh fuck that didn’t… i need a geometer!!

im having a good time tho :3

spins around holding you and awooawooawooing!!! :333!!!

wheeeeeeeeeeeeeeeeeeeeeeeeeeeeee

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.

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>