07 February 2014
I recently learned about media queries. I recently learned about CSS animation. This week I combined the two and it was beautiful, exciting, emotional, and dangerous.
I started off by created a series of boxes and giving them adorable names, and then creating basic faces for them. I added a few different @keyframes to this, but will focus on the eyes. The first thing I knew I wanted to do was have their eyes move, but not all in the same direction. To do this, all the pupils have the same class and every other set of pupils has an additional class. I used class="pupil" and class="pupil pupil-2" because I am not a clever person apparently. You will then assign an animation to “pupil” and a different animation to “pupil-2”. The second set of pupils will take on all the styling of the original pupils, but will follow a different set of @keyframes.
The next order of business was adding a media query that would trigger the animation to work only once the screen has been scaled down. Once the @keyframes were set up, I added a media query with the following screen specifications. The CSS for .mouth-open, for example, tells the animations to turn off when a screen is greater than 800px: 
In situations like the tongue, that should disappear completely at full screen, you would add a media query of display: none; on the element. Full screen, these guys do nothing. Smaller screen, they party. Hard.
See the Pen Responsive Box Party by Joni Trythall (@jonitrythall) on CodePen.
For further reading on the topic I found this article by Sara Vieira and this writeup by Chris Coyier to be the most helpful.
Happy responsive designing.
