Skip to content

Commit f13de09

Browse files
slight blog update
1 parent 1dbb2c2 commit f13de09

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

src/content/blog/Knocking the CSS rust off.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Now you don't need all of that, you can omit the prefixes and every browser supp
5252

5353
I won't be doing anything crazy or advanced in this post, just some practice with a coin flip using the CSS animations.
5454

55-
The following code examples can be found on [GitHub](https://github.com/Kyle-Undefined/examples.kyle-undefined.github.io).
55+
The following code examples can be found on my [GitHub](https://github.com/Kyle-Undefined/examples.kyle-undefined.github.io).
5656

5757
We'll start off with a base of:
5858
<iframe src="https://examples.kyleundefined.dev/coin-flip/base.html" width="100%" height="100" loading="lazy" title="Base"></iframe>
@@ -331,7 +331,7 @@ Phew, that's a lot! Let's break that down...
331331

332332
I start with the base step which is just the coin being on the "table". I then calculate the transform value from the Step * step number, and the bottom value from the height step * step number. The step number for the `transform` and `bottom` is the calculated degrees/height per animation stage. The height step goes up to 4 and then back down to 1. The rotation step goes up to 9 for the pause at the end. I then end the animation with the div being "reset" and resting.
333333

334-
Visually nothing changes, and technically functionality doesn't change either. However, this now allows me to adjust the coin flip by changing a few lines instead of the whole `@keyframes` setup.
334+
Visually nothing changes, and technically, functionality doesn't change either. However, this now allows me to adjust the coin flip by changing a few lines instead of the whole `@keyframes` setup.
335335
<iframe src="https://examples.kyleundefined.dev/coin-flip/flip-func.html" width="100%" height="300" loading="lazy" title="Flip Func"></iframe>
336336

337337
Want a slow mode flip? Easy, just adjust the `--anim-time` variable to `5s` and boom, it all updates.

0 commit comments

Comments
 (0)