Okay, so today I wanted to play around with something called “jelly animation”. I’d seen some cool effects online and thought, “Why not give it a shot?” I’m no expert, but I love experimenting with new things.
Getting Started
First, I needed a basic setup. I just grabbed a simple HTML file, linked up a CSS file, and that was my starting point. Nothing fancy, just the bare bones.
I decided to make a simple circle for my “jelly”. In my HTML, I just added a div with a class of, you guessed it, “jelly”.
Styling the Jelly
Now for the CSS part. This is where the magic (or at least, the attempted magic) happens. I gave my “jelly” div some basic styling:
- Made it a circle using border-radius: 50%.
- Gave it a fun color.
- Set its width and height.
So far, so good. Just a regular circle on the screen. Now to jiggle it like jello!
The Animation Part
I needed to create an animation. I Used keyframes in CSS. This is how I did the steps:
I named my animation “jiggle”.
Inside the keyframes, I played around with the transform property. I used scale() and rotate(). The idea was to make the circle stretch and wobble a bit.
I set different values for scale() and rotate() at different percentages (0%, 25%, 50%, etc.) to create the jiggling effect. It’s a lot of trial and error, honestly. I messed around with the numbers until it looked somewhat like jelly moving.
Applying the Animation
I then used the keyframes animation to my “jelly” div. I used:
animation: jiggle 1s infinite;
- jiggle is the name of my animation.
- 1s is the duration – how long one cycle of the animation takes.
- infinite means it keeps looping.
Tweaking and Experimenting
It looked… okay. Not exactly like real jelly, but it was jiggling! I spent a good amount of time just tweaking the numbers in the keyframes. Changing the scale values, the rotation angles, and the timing made a big difference.
I also experimented with adding a bit of box-shadow to give it some depth. It helped a little, but it still needed something more.
Final Thoughts
My “jelly animation” isn’t perfect. It’s more of a wobbly circle than realistic jelly. But, it was a fun little project! I learned a lot about keyframes and how to use transform to create movement. There’s definitely room for improvement, and I might try adding some more complex transformations next time. Maybe even layer multiple animations. Who knows! The important thing is I had fun, and I learned something new.