Animation Workshop

I have made an animation using CSS and adobe illustrator and this time I have chosen to explain everything in English as I was given the assignment in English, I hope this is okay 🙂

I started by drawing a storyboard with 5 circles that I wanted to show slowly falling to the ground and bouncing back up.

it is not the prettiest, but hey I am more in to using code and figuring out how things work, then I can worry about how it looks after the functionality is on point 🙂
I used the straight ahead action principle to make my animation, where I draw each sequence of the animation, one after the other.
Now I looked over some CSS animation tutorials to figure out how the code worked so I knew how exactly I should use my sprite sheet on a web page.
I made a few changes to the design of the sprite sheet and came up with something quick.

Now I had something simple to work with and that was more than enough for my lazy soul 😛
Time to do the fun stuff, CODING!!
So in my index.html I added a div element, what it means is I basically made a small box that I wanted to contain the sprite sheet animation above.
<div id=”animation”></div>

Now I went to my CSS and started working on that, here is what I ended up with:

<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-kubio-color-2-color">#animation {</mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-kubio-color-1-color">
  width: 500px;
  height: 500px;
  background-repeat: no-repeat;
  background-image: url(/images/ab.png);
  animation: play-animation 4s linear forwards;
}</mark>

<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-kubio-color-4-color">@keyframes</mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-kubio-color-1-color"> </mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-kubio-color-2-color">play-animation</mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-kubio-color-1-color"> {
  100% { background-position: -2500px; }
}</mark>Code language: HTML, XML (xml)

The first block of code sets the width and height of the element with ID “animation” to 500 pixels and specifies that the background image should not repeat. It also sets the background image to a file called “ab.png” located in the “/images” directory. In this case, the animation is specified with more detailed properties.

The animation-name property specifies the name of the animation, which is play-animation in this case.

The animation-duration property specifies the duration of the animation, which is 4 seconds.

The animation-timing-function property specifies the timing function for the animation, which is linear in this case. This means that the animation progresses at a constant pace.

The animation-iteration-count property specifies the number of times the animation should repeat, which is set to infinite in this case, so the animation will repeat indefinitely.

The second block of code defines the “play-animation” animation using the @keyframes rule. In this case, the animation consists of a single keyframe at 100%, which sets the background position to -2500 pixels. This means that the background image will move 2500 pixels to the left during the 4 second animation, creating a scrolling effect. The “forwards” value in the first block of code ensures that the element retains its final state after the animation finishes.

all in all it was a very funny assignment and I learned a lot about how animations works using CSS, next time I’ll definitely work harder on making something pretty, because CSS is straightforward and very simple, the hardest part in this assignment is without a doubt making something cool in adobe illustrator.

Here is how it looks…

Latest Comments