When designers new to animation often get confused between two essential tools: transitions and transformations. If you understand what they are, you can better use them in your designs and websites. Transitions and transformations are ways you can animate your website to make effects smoother or change how something looks on the page.
What are Transitions?
A transition is an animation that happens between changes. Prior to CSS3, when an element changed on a web page it was either in one state or another. For example, if a button changes when moused over it starts in the off state and ends in the on state. You can transition any CSS property from one state to another. This means it is possible to create motion effects (by transitioning between one position and another), blurring effects (by transitioning colors), and more.
A transition is an animation that is placed between the off and on states. In the above example, the button would fade between the first state to the second state with a transition.
What are Transformations?
Transformations are a different form of animation. Instead of bridging two states on an element, a transformation physically changes the look of the element. You can transform many aspects of an element, such as:
- scaling—changing the size of the element
- rotating—spinning the element
- translating—moving the element
One great feature of transformations is that you can use them to take a page that would otherwise be very gridded and boring and introduce some angles and tilts to make the elements look less rigid.
The thing to remember about transformations is that they are not animated by default. If you place an image on a page and add a transformation to it, such as a rotation:
img { transform: rotate(30deg); }
It will not move to that position. It will simply appear on the page as having been rotated 30 degrees.
Combining Transformations and Transitions is Where it Gets Fun
CSS transitions combine naturally with CSS transformations. One example is of a photo gallery. You could set up all your images in thumbnail size in a grid on the home page. Then when someone mouses over the image, you transform the image to scale up two times larger and tip it slightly. If you just use a transformation your image will get bigger and tipped in one step, without any intermediate animation. With a transition applied to the element, it will grow on your page and tip slowly from 90 degrees to tilted.
By using both transitions and transformations on your web pages, you create dynamic sites that are interesting to use.
What About Translations?
You may be wondering about that last CSS3 ’trans” item: translations. Translations are a transformation function that moves the element across the x- or y-axis. So, when you translate an element you are transforming it’s location.
Be Careful When Writing Your CSS
I have been known to type ’translation” when I meant “transformation” or “transition” and vice versa and this can get very frustrating to troubleshoot. These three terms mean three different things, so if something isn’t working correctly, it’s best to check that you’re using the right term.
