Getting Started with Transition and Transform In CSS

CSS transitions and transformations are one of my favorite things to work with. I love being able to create cool, simple animations with just a few lines of code. Making fully animated pages without Javascript also appeals to me. It’s perfect for designers just getting into coding because the syntax is simple and concise, with the browser doing most of the work. Without further ado, lets dive in to the syntax and different things you can do with CSS Transition and Transform!

First I will cover the syntax for transitions. I start with shorthand because of ease of use, but keep in mind that you can split each of these properties of a transition up into it’s own line.

div { transition: <property> <duration> <timing-function> <delay>;}

//If you don't like shorthand
div { transition-property: <property>; 
transition-duration: <duration>; //and so on...

}

So to walk through these one by one:

• <property> refers to the aspect of the element you want to set the transition for. These are things like opacity, height, width, etc. You can find a full list of animatable properties here.
• <duration> is pretty self explanatory. It’s how long you want the animation to run for.
• <timing-function> refers to the speed of the animation at different parts of the animation. For example, a timing-function of ease-in means the animation runs slow at first (or “eases-in” to the animation), then speeds up towards the end of the animation. There are a surprising amount of timing functions, which you can find here. I usually use ease-in, ease-out, or ease-in-out.
• <delay> is also pretty straightforward. It’s simply the time from the triggering event that you want the animation to start. So if I want an element to transition on hover and I have a 0.5 second delay, the animation will start 0.5 seconds after the hover event occurs.

That’s the basic syntax for the Transition property. Keep in mind, this only refers to the timing associated with the animation of certain properties, but doesn’t create the animations by itself.

One reason I like transition is you don’t even need to associate it with a transform property. Here’s what I mean:

Check out how I can change opacity based on an element’s state, and the transition I applied to that element controls how opacity looks changing from 1 to 0 when I hover.

Now we can get into the really fun stuff:CSS transforms.

Remember this while you are reading about transforms: 
You need to assign a transition property to an element for it to transform!!!!! (I spent a few minutes feeling dumb by forgetting this).

There are a few different transform functions we can use in CSS, but I’ll start with scale. This command makes the element bigger or smaller by the degree that you type in. The syntax is as follows :

div { /*You need to include -webkit- prefix for safari, chrome, IE, and Firefox browsers for transforms*/

transform: scale(<width>,<height>)

/*scales width and height by scale factor*/ 
transform: scale(<scale-factor>)

/* you can scale width(X) and height(Y) individually too */
transform: scaleX(<scale-factor>); transform: scaleY(<scale-factor>);

}

Check out the first square in this demonstration to get the effect.

In this example, I scale the object by 120% it’s current width and height.

A good thing to keep in mind when using scale is that it will affect the font-size and padding of the element you’re scaling.

As with many transform properties, scale has a 3d version. A scale3d property will scale an element along the z-axis (the theoretical axis coming out of the screen), which you can read about here.

The next transform function you can use is translate. When you translate an object, you make it side vertically or horizontally across the screen. Here’s how you declare it:

.div { transform: translate(<horizontal>,<vertical>);}

And hover over the second square to see what it looks like:

A few handy tips on translate:

• Whatever surrounds the translated element don’t move around it when it translates
• A negative value for the horizontal x-axis translation will move the element left on the screen, while a negative value for the vertical y-axis translation will move the element up on the screen

The next property/function, perspective , was a lot harder for me to understand at first. I spent a couple hours banging my head against the keyboard trying to figure out the difference between the perspective property and the perspective transform function. I’ll try to explain it with clarity so you don’t have to go through the process. Lets start with the property.

The perspective property refers to the 3d space for the children of an element. So, if you give an element a perspective of 500px, that elements children will have 500px of space to be rotated or translated along the “z-axis”(if you don’t know about the z-axis read this) . The higher the px of perspective applied to an element, the less severe 3d transforms will look on it’s children. Here’s an example:

In this pen, you can see the perspective function is used as well, in the last pair of rectangles. The function transforms an individual element’s perspective, or amount of 3d space in which it has to be transformed, resulting in a slightly different effect than the perspective property. I encourage you to play around in this pen to get a better idea of the visual impact of using perspective in different ways. CSS tricks does a great job explaining perspective here.

Another great transform function is rotate. You can rotate around the X,Y, and Z axis’. Here are some different ways to use it:

div {

// This default declaration represents the rotation around the Z axis (2D rotation)

transform: rotate(<rotation>deg)

transform: rotateX(<rotation>deg)

transform: rotateY(<rotation>deg)

}

Check out squares 3,5, and 6 in my example pen where I use different types of rotations to create some cool effects(see what happens when you combine it with perspective!).

Last but not least, we have skew. This function tilts the transformed element along the X or Y axis by the specified number of degrees. The syntax for determining skew is the same as scale, but you add “deg” after the number. Check out square 4 to see what skew does to an element.

Those are all the different kinds of transforms you can do in CSS! It’s kind of a lot to take in at once, so here are some references for when you forget the exact syntax or visual effects:

• https://css-tricks.com/almanac/properties/t/transform/
• https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Transitions and transforms can be useful for simple animations, but CSS animations usually function better for multiple-step, complex animations. I will definitely cover those in a future post.

Thanks for reading  now go make some transform