When I began my journey into software design, I attended an event where an alum of the program I was considering was presenting a project they had worked on, and they mentioned working with @ keyframe animation. This perked my ears, as I had studied animation all through my high school years into college, and I still dabbled a bit in my spare time.
This was... not the same thing at all. Kind of the same, but not really. Most of the programs I used for 2d cell by cell hand drawn use the word 'keyframe' to describe the endpoint of a path created by the element you are animating- you use them as sort of 'footholds' while creating the motion/color/shape changes that take place 'in-between them'. I was expecting this as well for the css property- and while that is sort of the same thing, that you create a change that will be executed at the point of time you designate, css is NOT animation software, and all of those 'frames' need to be either css properties individually managed, or static images.
In the current project I am working on, one of the things we need is a 'fire' or 'burning' effect, and while looking for a good element to drop in, I didn't really find any hand-drawn, 'inky' sort of flames that would fit with our design. I did find some really cool examples that made me extremely curious about my own abilities and experience, and whether or not I could just do this myself.
In this example:
A loop begins of a seaside city next to a slowly swirling sea. The moon rises, and a torch appears, floating from doorway to doorway, lighting all the windows from inside. The city burns, the sun rises, and the loop begins again.
This entire thing had 1 CSS property, a background color, and ZERO javascript code. EVERYTHING in pure html. Insane, I had never considered or even seen this type of design.
And this one:
Now this little Campfire Colony by Jackie Zen, was pretty easy for me to understand!
Campfire Colony
Html that contained basically only the actual elements being animated, and css handling the rest:
Okay. Now with my knowledge of Keyframe animation, could I create something myself that would match the inky style we wanted?
I decided to give it a try. I decided to draw out a simple 3 flame vector image. The simplest approach with my 2d background would be to create all the frames I want my animation to go through, and cycle through them. I decided to aim for 7 frames, and created those images by drawing the flames path of motion over the top of the previous flame, cell-by-cell style.
My flow went like this: Create 3 flame images, group together(frame 1). Draw 3 more flame images(the 'forward motion') group together(frame 2), change the 1st flame image opacity to 0. Repeat.
Now that was done, I wanted to download these vectors into transparent png, load them into my project, and see if I could have them loop through the @keyframe property.
)
It works!
I made a flameshow object, and a flameshow image property that included the 'animation' method. That pointed to the 'keyframes cycle', where I set up the opacity to work with the .7 seconds(so each frame shows for .1 second. I also had the animation set up looping infinitely and by 1 step each.
While this flame is really rough, I can totally use this new skill to add all sorts of things to my designs!
Top comments (0)