25 Days of CSS Animations: Teaching Myself CSS through Motion Design.
Tags: webdev, codepen, showdev, css
Published: 2019-10-20 19:27:24

![25 Days of CSS Animations](https://thumbs.gfycat.com/BlissfulBriskJellyfish-size_restricted.gif)
<figcaption>25 Days of CSS Highlights</figcaption>

It was the first day of 2019 and I was not where I wanted to be. I felt at my peak when learning something new. The new year started with a project idea, and the winter ended with an unmotivated, unfinished project.

I missed the college coding grind--learning new things and bringing ideas to life. A skill I've always wanted to master was CSS. I want to leverage it and create compelling user experiences for people to enjoy. My background in Python, Java, and C++ gave me a solid computer science foundation. Now it was time to modernize my skills and make my work functional and visually appealing. 

![25 Days of CSS: Eevee petting app](https://cdn-images-1.medium.com/max/600/1*2yOENbdjZ4AMpEY7qPnD6g.jpeg)

One day I opened CodePen, felt waves of inspiration, and got right to work. I studied HTML and CSS using the [MDN Web Docs](https://developer.mozilla.org/en-US/), [W3Schools](https://www.w3schools.com/) and [CSS Tricks](https://css-tricks.com/).

Around this time I was also teaching myself vector drawing and animation using Adobe Illustrator and After Effects (until my free trial ran out...). When I found [this pure CSS BB-8 animation](https://codepen.io/devtips/pen/xZdJaE) on CodePen, I was captivated. I *had* to learn how to do that.

**And so it began.**

![let's get started](https://cdn-images-1.medium.com/max/1600/1*UaWKZBQtCKCSK8TCchtXCw.gif)

I challenged myself to spend 20 days coding CSS animations before the end of the year. The final day was when I got the most ambitious, and the most creative, so I spent a total of 25 days!

You can view my *25 Days of CSS* journey on [CodePen](https://codepen.io/collection/DBeLyg/).

* * *

## Tools

### The Bare Minimum

Everyone starts small. For the first 10 days of the challenge, I used the following to brush up on the basics. These served as the foundation for my frontend skills:

* **[HTML](https://developer.mozilla.org/en-US/docs/Web/HTML):** Hypertext Markup Language; creates the content of a webpage.
* **[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS):** Cascading Style Sheets; describes the style of a webpage.
* **[Javascript](https://developer.mozilla.org/en-US/docs/Web/javascript):** A programming language used to describe a webpage's behavior. This was used for select animations. 

* **[CodePen](https://codepen.io):** An online code editor for HTML, CSS, and Javascript where users can showcase their work - great for getting your web dev code seen and debugged.

### Power Ups

Everyone also gets lazy and curious (by everyone I mean me). Once I was comfortable with the bare minimum, I explored tools that would improve the development process:

* **[Sass](https://sass-lang.com/):** Style sheet language that provides variables, functions, mixins, and more to streamline CSS.
* **[Pug](https://github.com/pugjs/pug):** A template engine for a more clean, whitespace sensitive syntax for HTML--great for speeding up development.
* **[Visual Studio Code](https://code.visualstudio.com)**: A cross platform source-code editor. Used to practice setting up my Pug and Sass developer environment.

## The Process

I wanted to take time and care to learn and understand CSS properties and its uses. Breaking down my creative process in this way enabled me to make something fun and learn something new.

### 1. Have an Idea
I'd browse [Dribble](https://dribbble.com), [CodePen](https://codepen.io), and [r/MotionDesign](https://reddit.com/r/MotionDesign) for inspiration. 

I can be overly ambitious when learning something new, so finding inspiration on these sites helped me scope my animations while realizing CSS's capabilities.

![Animation Inspiration from CodePen and Dribbble](https://i.imgur.com/svzDxY1.png)
<figcaption>My collection of inspiration from CodePen and Dribbble</figcaption>

Then I wrote down every possible idea I had with no limits. Most of my ideas came from things I enjoy like video games, sci-fi, kawaii culture, the list goes *on*…This would help me persevere through challenges and motivate me to keep working on it.

![Animation Ideas](https://cdn-images-1.medium.com/max/600/1*WHHMc0_9KZnB26mVKngWZw.png)
<figcaption>Brainstorm Bomb 🤯</figcaption>

### 2. Sketch a Blueprint
I'd start off with a rough sketch of the animation. This is where I planned my HTML elements, and the animation directions for specific elements.

![Animation Blueprint for Coder](https://cdn-images-1.medium.com/max/1600/1*lO8X-Rd4pUyoUnpvZNTihg.png)
<figcaption>Sketch for Day 10</figcaption>

### 3. Find Examples

The beauty of coding is that you can learn from existing implementations and repurpose them for your own. 

*Why reinvent the wheel? Improve it with new ideas.* 

I inspected animation code that seemed similar to what I was trying to accomplish, and combined it with what I learned to form an elegant solution. CodePen and the Chrome developer tools were a big help here.

### 4. Animate!

Equipped with ideas, blueprints, examples, and my Bulbasaur plushie, I brought my CSS ideas to life. I've had roadblocks, I've been personally victimized by typos, and I wasn't always happy with my pace. Thankfully, online research and rubber ducking helped me learn from my mistakes and progress faster and faster after each project.

## Days 1–8: Start Small & Recreate Examples with a Twist

The first 9 days focused on understanding shaping, positioning, keyframes, and transitions. I grabbed designs, animations, and pens I really liked, and tried to recreate them from memory.

{% codepen https://codepen.io/acupoftee/pen/daoqOg default-tab=result %} 
<figcaption>25 Days of CSS: Hello CSS (A twist on Marjo Sobrecaray's Hello Pen)</figcaption>

{% codepen https://codepen.io/acupoftee/pen/pGgrgo default-tab=result %} 
<figcaption>25 Days of CSS: Pokéball, Go! A recreation of a Dribbble by Mark Usmiani</figcaption>

{% codepen https://codepen.io/acupoftee/pen/aXJNmb default-tab=result %} 
<figcaption>25 Days of CSS: Egg Head in Love - An animated version of a Dribble shot by MBE</figcaption>

{% codepen https://codepen.io/acupoftee/pen/LqLRjB default-tab=result %} 
<figcaption>25 Days of CSS: Eggstraterrestrial - a twist on Marjo Sobrecary's pen Glowing Meteor</figcaption>

{% codepen https://codepen.io/acupoftee/pen/ErooQj default-tab=result %} 
<figcaption>25 Days of CSS: Sun Blocked - a recreation of Gal Shir's Dribbble animation</figcaption>

{% codepen https://codepen.io/acupoftee/pen/dEYLWg default-tab=result %} 
<figcaption>25 Days of CSS: Beauty and the Beast's Enchanted Rose - a twist on Marjo Sobrecaray's Enchanted Rose Pen</figcaption>

## Intermission

Part way through my challenge I felt insecure. I wondered whether or not there was any merit or value to learning CSS this way.

*Am I wasting my time? Is this even useful for web development?*

Well, **let's find out.**

I put my new skills to the test by designing and coding the frontend for a make up e-commerce site using plain old HTML and CSS:

![Shimmer and Shine website](https://camo.githubusercontent.com/93254be4f1b866e10551b2995550a1cad50727b0/68747470733a2f2f7468756d62732e6766796361742e636f6d2f486f7370697461626c65446561646c79427562626c65666973682d73697a655f726573747269637465642e676966)
<figcaption><a href="https://acupoftee.github.io/Shimmer-and-Shine/">Shimmer and Shine</a>: Make Up E-commerce Site.</figcaption>

Here I used the traditional column layout with the [clearfix](https://www.w3schools.com/howto/howto_css_clearfix.asp) method, studied the tradeoffs between traditional columns, flex boxes, and CSS grids after using flex boxes in my animations, applied media queries, and debugged elements through Chrome's developer tools.

Then, I worked on a [fun redesign of MAC Makeup's landing page](https://medium.com/r/?url=https%3A%2F%2Facupoftee.github.io%2FMakeup-Ecommerce-Landing-Page%2F) inspired by [Julie Park's FitBit landing page]( https://codepen.io/juliepark/pen/eMVwVy). I applied my knowledge of CSS positioning, transitions, borders, box shadows, render orders, fonts, and clips.

![MAC Makeup Landing Page](https://camo.githubusercontent.com/4a804c785036480d6d2a9d641794c3641e7873ec/68747470733a2f2f7468756d62732e6766796361742e636f6d2f5465727269626c654f6e6c79486f6e65796261646765722d73697a655f726573747269637465642e676966)
<figcaption><a href="https://acupoftee.github.io/Makeup-Ecommerce-Landing-Page/">MAC Makeup Landing Page</a></figcaption>

Animating armed me with the ins and outs of numerous CSS properties like backgrounds, transforms, borders, positions, the list goes on. Animating reinforced newly acquired skills, and thus exercised them by building static web pages. 

Whether you're a frontend developer, CSS animator or hobbyist, we're all using the same language -- the skills and concepts learned are transferrable by default.

{% twitter 1179702722376982532 %}

## Days 9–25: Climb the Curve & Code from the Heart
My later projects were based on original ideas once I got more comfortable with CSS. I've always wanted to make an animated avatar, and cute animations inspired by my everyday life. Some of my work was also inspired by my favorite Nintendo video games like *Super Mario World 2: Yoshi's Island* and *Pokémon*. 

{% codepen https://codepen.io/acupoftee/pen/mYGNbj default-tab=result %} 
<figcaption>25 Days of CSS: Interactive Self Portrait</figcaption>

Day 10 is one of my personal favorites. I made this once I realized how much I love coding. Before this challenge I've had several low points, wallowed in doubt, and grew skeptical of my path as I felt my skills and projects weren’t as competitive and impactful as my peers yet.

Thankfully I remembered why I'm doing this--**to learn and to create engaging experiences**. With that in mind I pursued this challenge with hard work, determination, and self improvement, and in turn it restored my love for coding. 

{% codepen https://codepen.io/acupoftee/pen/Yowmwm default-tab=result %} 
<figcaption>25 Days of CSS: Coder.</figcaption>

Day 12 was spent styling my first full stack project for my coding bootcamp which was a single paged Tic Tac Toe game. Since our whole cohort was assigned the same game, I gave my version an *animated* personality:

{% instagram Bz7KlCqACOK %}

<figcaption>25 Days of CSS: Tic Tac Toe</figcaption>

I resumed my personal animations for days 13 - 25:

{% codepen https://codepen.io/acupoftee/pen/ydZdvr default-tab=result %} 
<figcaption>25 Days of CSS: Super! (My reaction to passing my first bootcamp project \o/)</figcaption>

{% codepen https://codepen.io/acupoftee/pen/mdbqQjB default-tab=result %} 
<figcaption>25 Days of CSS: Under Kamek's Spell - I loved the spell trail effect in Yoshi's Island and felt like recreating it 🌈✨</figcaption>

This one is another favorite. Days 17-18 was inspired by this [gorgeous scene](https://i.imgur.com/O8P0IgQ.jpg) from my favorite *Pokémon* episode *[Bulbasaur and the Mysterious Garden](https://www.pokemon.com/us/pokemon-episodes/01_48-bulbasaurs-mysterious-garden/).*

{% codepen https://codepen.io/acupoftee/pen/YzzzYxj default-tab=result %} 
<figcaption>25 Days of CSS: Pokemon Friends. Bulbasaur and Pikachu go great together like CSS and animations. </figcaption>


This last pen was an interesting one to work on. I revisited *[Pokémon X](https://www.pokemon.com/us/pokemon-video-games/pokemon-x-and-pokemon-y/)* for the Nintendo 3DS and opened up *[Pokemon Amie](https://www.youtube.com/watch?v=Wo0zo8vLkUs)*. This feature lets players pet and feed their their Pokemon using the 3DS touch screen. It's fun and therapeutic on a rough day, so I was compelled to code a desktop version for myself and others to use. 

{% codepen https://codepen.io/acupoftee/pen/zYYKRoX default-tab=result %} 
<figcaption>25 Days of CSS: Pokemon Amie ❤️ Hover over Eevee and hold left click to pet it. </figcaption>

* * *

I'm grateful for this journey. I learned key CSS concepts like keyframes, transitions, transformations, blend modes, clipping, masking, media queries, pseudo elements, flex boxes, and much, *much* more. 

Additionally, I grew more confident in my coding and problem solving abilities. I've picked myself back up by completing projects from start to finish, managing my scope, asking questions, and maintaining a growth mindset. 

I'm encouraged by this challenge. I'm excited to learn more and tackle more frontend projects in the future.