Playing with CSS animation in 30 minute increments
Tags: css, javascript, webdev, showdev
Published: 2019-10-20 04:41:27

### Some things you should know about me:

1. I am a mom! I have a dog! I work full time! I have a life! I have very little time to do dev work outside of my actual job. So that means that if my job doesn't require a skill, I rarely have the opportunity to spend time improving in that area 🤪.

2. An example of an area I rarely get to dabble in: Animation. I am also not very artistic. The idea of being asked to animate anything makes me nervous because I feel like I am just so abysmal at it. BUT I do really admire the people who CAN build fantastic animations.

### So my mini-project for the week:

Spend 30 minutes a day trying to make some little animations. 30 minutes because that’s about all the time I get before someone requires my attention. Also it’s low pressure - no one is going to build something fabulous in 30 minutes, so I don’t have to expect too much of myself, but at least I could play around a bit in that time.

I wanted to share some of my explorations in this post, as well as share some things other people built that inspired me 🙂 

-----

### First up: Some text animation

My first foray into animating is pretty shamelessly inspired by a very fantastic animation by [Rachel Smith](https://codepen.io/rachsmith) that you can [check out here](https://codepen.io/rachsmith/pen/oGEMbz)

Featuring: Some simple CSS animations on letters as well as very basic animation on a SVG to create a rainbow. 

{% codepen https://codepen.io/roseyrobertson/pen/BaaQjRa %}

From there I thought I should try to be more original and not be so inspired by someone else’s work, so I came up with this other text animation, which has probably been done before as well, but it was new to me:

{% codepen https://codepen.io/roseyrobertson/pen/pooNRVz %}


-----

### Moving beyond text

I saw this really cool [star rating animation](https://codepen.io/aaroniker/pen/XWrxyRJ) by [Aaron Iker](https://codepen.io/aaroniker) and thought I’d do a little rating animation of my own. It is about 75% less cool than the inspiration, but that’s ok -

{% codepen https://codepen.io/roseyrobertson/pen/yLLVoYJ %}

Then I saw this really gorgeous [Pokemon animation](https://codepen.io/acupoftee/pen/YzzzYxj) and 🤤 I loved it ♥️. I figured I could do something kind of similar but simpler. There's no way I can draw a Bulbasaur and a Pikachu hanging out, but I thought I could manage a sunset/moonrise:

{%codepen https://codepen.io/roseyrobertson/pen/eYYBeMp %}

-----

### And that’s about where I left it!

A few thoughts on the outcome:

- I don’t feel like my skill level got way better through these projects... it’s probably about the same as it was before. But it gave me the confidence to _try_ and play around and makes me want to do more in the future. I imagine if I keep practicing I will improve 🙂 

- **😁 A challenge for you -** It’s kind of a fun exercise in general, so I thought I’d challenge anyone who reads this to embark on a similar project, either by:

1. Pick something you want to be better at and devote 30 minutes a day for a week, see what you come up with

2. _Or_, if you want to stay in the animation genre, share in the comments an animation you’ve done that you’re especially proud of.

----

Thanks for reading and putting up with my shameless self-promotion of silly codepens I have built 🤗

---

Honourable mentions: A few other cool codepen pens I found:

- [Under Kameck's Spell](https://codepen.io/acupoftee/pen/mdbqQjB)
- [Confetti Jam!](https://codepen.io/elifitch/pen/apxxVL)
- [CSS 3D Solar System](https://codepen.io/juliangarnier/pen/idhuG)