Mickey Mao Animation using CSS and SVGs / 2015

This is an exciting project in which I attempted to create small animation by using CSS code. Also, this is one of the NYU ITP Camp sessions,which was led by New York web designer Ms. Leandra Tejedor. In the session we used software such as Sketch or Illustrator file as the animation elements, saving the file as SVGs. Eventually, we animated them by using CSS code. I have listed the process below:

In addition, the illustration I used is a cartoon graphic called “Mickey Mao”. I got this idea and drew this illustration in 2007. Afterwards, I printed 100 of them for a limited run tee shirt them and they sold out. There are many different versions of “Mickey Mao” T-shirt on the web now; however, I think my “Mickey Mao” is unique and cute since some people saw my “Mickey Mao” and laughed loudly.

The following steps are below:
1. Create and draw your own character using software either Sketch or Illustrator.
2. When you finish, give every layer a name, then save it as SVG file.
3. Open SVG file in software Sublime Text 2 and copy the all codes from the text.
4. Paste the all codes on “codepen.co” HTML and find out the code [ id=”name” ]
5. Change the code [ version=”1.1″ ] to [ class=”name of file” ].
6. Start using CSS codes to animate the illustration.

The CSS codes are like this:

#backgroundred{
transition: fill .4s ease;
}
#backgroundwhite {
transition: fill .4s ease;
}
.mao:hover #backgroundred{
fill: white;
}
.mao:hover #backgroundwhite {
fill: red;
}
body {
background: red
}
.mao:hover{
-webkit-animation: shake 1s infinite; /* Safari 4+ */
-webkit-transform-origin:50% 70%;
}
@-webkit-keyframes shake {
0%, 100% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
}

Here is the final result: http://codepen.io/anon/pen/YXrOpa