CSS Transforms and Transitions: A Beginner’s Guide
Transforms are a sometimes underutilized feature of CSS, especially given that they can add so much to the interactivity and user experience of a web page, without relying on an outside library. Transforms offer a way to manipulate or distort elements and make them look animated. There are a few different transforms, and they allow you to do things like move, scale, and skew an element. I’ll be using the following CodePen to walk through transforms, so feel free to follow along — or just skim over the CodePen itself.
Before we can jump in to the different kinds of transforms, we’re going to go over transitions. Without transitions, transforms can look harsh, and we want our animations to be smooth and gradual.
If you want to see what a transform looks like without a transition, take a look at the first jellyfish in the CodePen, labeled ‘Harsh Rotate.’ The transform simply happens without any transition from the prior state to the transformed one.
Transitions
A transition, as the name implies, is a CSS property that helps smoothly transition between property values. It doesn’t only need to be used with transforms, and can be utilized with a variety of CSS properties.
The syntax is pretty simple:
transition: [property][duration][timing-function][delay];Property
This field is required, and denotes the property being transitioned. For example, a background-color or box-shadow on hover. In all of our transform examples, this value will be ‘transform.’ You can also set property to equal ‘all’ properties.
Duration
This is also required and specifies the length of the transition in seconds or milliseconds.
Transition Timing Function
The transition-timing-function specifies the speed curve of the transition. In other words, how the transition is distributed over the duration period. For example, setting the timing-function to ‘linear’ will make the speed consistent throughout the transition. Below are some commonly used values:
- linear: Specifies a transition effect with the same speed from start to end.
- ease: Default value. Specifies a transition effect with a slow start, then fast, then end slowly.
- ease-in: Specifies a transition effect with a slow start.
- ease-out: Specifies a transition effect with a slow end.
- ease-in-out: Specifies a transition effect with a slow start and end.
All transition-timing value definitions from W3 Schools, for more details take a look here.
Delay
Specifies when the transition will start, accepts a value in seconds or milliseconds.
These properties can also be used individually, you can learn more about that here.
Transforms
We will be using transforms in conjunction with transitions. For this example, our transform will be only be applied to the hover state of our jellyfish.
The syntax for transforms is pretty simple:
transform: [transform-type](value)Transform type is where we specify which transform we want to apply. The value accepted will differ depending on the transform.
Rotate
As the name implies, the rotate transform turns our element based on the degree value we provide.
#jellyfish-rotate {
transition: transform .5s ease-in-out;
}#jellyfish-rotate:hover {
transform: rotate(45deg);
}
Scale
Scale increases or decreases the size of our element. A value of 1 is the baseline, and anything greater than 1 will increase the size, and anything less than 1 will decrease it.
#jellyfish-scale {
transition: transform .5s ease-in-out;
}#jellyfish-scale:hover {
transform: scale(1.3);
}
Skew
This transform skews an element along its X or Y axis, or both. We can specify skewX or skewY, or pass two values to skew in order to skew along both. Skew with one value will default to skewX.
#jellyfish-skew {
transition: transform .5s ease-in-out;
}#jellyfish-skew:hover {
transform: skew(40deg)
}
Translate
Translate moves the element horizontally or vertically, with translateX moving to the side, and translateY moving up or down.
#jellyfish-translate {
transition: transform .5s ease-in-out;
}#jellyfish-translate:hover {
transform: translateX(50px)
}
Matrix
Combines all transforms into one. It accepts 6 values, and while you can play around with them, you can also use a converter like The Matrix Resolutions.
#jellyfish-matrix {
transition: transform .5s ease-in-out;
}#jellyfish-matrix:hover {
transform: matrix(1,1,1,.5,.5,.5);
}
And those are all the transforms!
Some more topics to look into (that may receive a blog post in the future):
