@keyframe animations and basic transforms in CSS

5 min readMar 21, 2020

One of the best things about being a “full stack” web developer, is that when you hit a block with some frustrating API build or a confusing piece of logic, you can always retreat to the simple joy of styling with CSS, to change up your work flow and give you some immediate gratification from your code.

CSS is a lot like Elmo, annoying and yet delightfully gratifying at times.

@keyframes

Simple keyframes animations are a lot of fun to work with.

Codepen is a great place to play with your new ideas and quickly test and iterate front end code. Your @keyframes animation for this Pen is:

In this case, your percentages represent the states your animation will go through from the first to the last frame.

Here there are three basic states. (This could also be written as “from{}” and “to{}” code blocks. )

Using percentages is great because you can simply add as many different states as needed

Simple @keyframe animation

The animation settings on the box class in the CSS are important to note for crafting natural animations. In this case:

“duration”, “delay”, “iteration-count” can all be adjusted here.

“Duration”, “delay”, and “iteration-count”, do just as you would expect. Play with the pen if you want to test your assumptions. These, of course, live in the block of code describing the “circle” element at this point.

Transform

Transform is a great property often combined with @keyframe animations. We can use it to adjust our animations as a desired element changes from one state to another.

“Skewing, rotating, translating, or scaling” are some basic things we can do with the “transform” CSS property.

For a great resource for digging in to everything available to you with transform, check out: https://css-tricks.com/almanac/properties/t/transform/

Skew —

Skew tilts our item slightly to the indicated degree. In this case, I’ve added a skew(40 degrees);, then changed it to skew(70deg);, so you can quickly see the affect of this particular transform parameter.

Translate —

Translate is a very powerful positioning tool that kind of acts like a global control if need be, where we can directly set the x and y position of the element we are manipulating.

I found this one to be huge for last minute CSS details. If you’re making your app responsive, take special care as to how this will affect your layout on different devices.

It’s important to note, that the variables for positioning in the translate method, are “x axis” and “y axis” and formatted like so: “translate(x,y)”.

Here, I’ve commented out the margin-left property, as it seems to override the transform.

We have the transform from line 26 at from our “50%” position, moving to line 34. We will see a change in x axis of 260px, and y access -40px. Resulting in:

transform translate() doing it’s thing from 50% position to 100% position

Transform in React Styled component

This can also work well in Styling React components. For example, as I struggled to position my map correctly. I found I was able to set a transform translate() in my Style object.

setting a “mapStyles” object to pass as a prop.

This is then passed into the render() method of the mapContainer as styles = {mapStyles}.

The render() method of the “mapContainer” component in my React App.

The position for the map was set in the style object being passed with the mapStyles variable https://speckworks.github.io/calibeachfinder

Scale —

Scale is super straightforward. scale(1.5), scales up the image by 50%. scale(2) doubles it. This can very be very easily seen in our ball animation from above.

Setting scale(.5), gives us an element 50% smaller

Here, I’ve set scale to “.5” and the element will be “scaled” down to 50% of it’s original size.

We could, alternatively, make it scale(10) for an increase by a factor of 10.

Rotate —

Rotate is also pretty self-explanatory. The parameter passed is 0–360 degrees, and refers to the rotation of the image in space. You can also specify rotation in 3 dimensional space, using x, y and z settings.

This codepen is Super helpful for messing around with the Rotate property of Transfrom:

That gets us through of some of our fundamentals for Keyframe Animations and using Transform. If you have any suggestions or want to share good resources with me, please reach out here or on LinkedIn!