CSS Animations Starting Out

Thursday, September 15, 2016 Unknown 0 Comments


So recently at my internship I was given a task to work with CSS animations and transitions. I'm really seeing a big progress in my understanding, before I didn't think much about CSS and focused solely on JavaScript. But I realize now how important CSS is in order to add a bit of glamour to any website.

One of the areas I've been focusing on is understanding how to write in LESS, and also to apply both CSS, HTML and JavaScript together to make really cool effects. I've been working on a Soundcloud custom player using their starter code to initially set up my project. After awhile of messing with other people's code I began to find that I'm beginning to learn to READ the code and actually UNDERSTAND it.

That means I'm getting somewhere.

Well, anyhow back to CSS animations. I found that a lot of simple things can be done using well simple coding. Here is one I did on codepen, with a little help to make the heart-shape, but the concept of just making the heart thump came from understanding the basics of keyframes. Pretty cool, no?

Anyways, keep practicing. A little effort goes a long way. I've also been doing my yoga and studying languages, right now I'm doing French, Turkish, Cantonese, Korean, French and German. Not too much, right?

See the Pen Heart Beating - CSS Animations by Dana Ng (@riceball) on CodePen.