I have used timing principle in my animation. I used illustrator to draw my animation. And I choose to used my logo (for now) to animate with the circles. I suppose to animate a circle that looks like a button but I changed my mind. Because button gives more excitement of what will gonna happen next when you pressed the button but then I realized I do not have enough time to do some more spritesheet. Thats why I made a circles of two with different sizes and looks like its turning around til it reaches the end (littleplay logo). To be honest I have a problem with my animation at first because I forgot to check “use artboard” when I export my drawings.
Here is my Storyboard
It was actually easy to do the drawings because I have the guides and the right sizes of my spritesheet. But the one that took my time was “what” and “how”. What means, what should I animate that satisfies me and my viewers? At first I was thinking to animate a flower that blooms. It could look very realistic but then I came to “how” question. Thats why I have changed my mind many times until I ended up with circles that goes round. I actually calls it “life goes on with my logo at first and in the end”.
About the code, I have a class named sprite_circle. My drawings has 400px width and 400px height each sprites. I used background property for my image for my exported drawings from illustrator and no repeat. No repeat means it shows only one image and no padding. The animation lasts for 3 seconds with a 12 steps then starts over again endlessly (infinite).
My keyframes only shows how my animation play it part on my website. It has a 0% background position with 0px; and 100% background-position with -4800px. This means that all spritesheets shows only on one place. I took the number of -4800px from my artboard size from illustrator.
My Animation Links http://littleplay.dk/animation_with_css/final_result/logo_animation.html
Adobe Illustrator, Visual Studio code and Filezilla