An Overview of Animatable CSS Properties
/Now more than ever, designing a standout user experience is essential to keeping visitors engaged. Effectively balancing cosmetics and functionality is challenging. What if we could add some flair while asserting greater control over our web elements? Enter animatable CSS properties.
As it sounds, we can manipulate these CSS properties using animations and transitions. Any properties with number, color, or length values are prime candidates. This list is quite exhaustive. Browser support is also excellent—covering 96.77% of global web users.
CSS animations are particularly awesome since user interactions can trigger them. These additions can make your web presence more enjoyable (encouraging users to explore further) and memorable (enticing them to come back).
How do we write animatable CSS rules?
We can write these CSS rules on their own. Additionally, we can incorporate JavaScript for added flexibility. Enhancing your code with animations and transitions is pretty straightforward:
A test animation of the background-position property. Courtesy of Tutorial Republic.
For those finding their CSS sea legs, here’s a quick rundown of the basics. CSS can apply one or more stylistic properties to certain elements. It’s what allows us to make backgrounds green, customize images, and beautify lines of text. The true fun begins when we want to introduce state changes to our web elements. Just a few examples:
While that background starts out green, we might trigger any event turning it orange
We may want an image to expand or “pop out” at users on hover
We might want to apply an animated underline to hovered links
These ideas (and those like them) raise some key questions. Will our element turn orange immediately, or will it fade to orange? To what degree will our images grow? How quickly should our underline travel from point A to point B? Your preferences and coding will answer these. Let’s break down some key components:
Size – Defines changes in the scale of an element, when a CSS transformation or animation is triggered
Position – Many animations focus on shifting or moving elements in a customized manner
Opacity – Allows an element to become solid, translucent, or transparent
Weight – Synonymous with thickness, letting us change the appearance of lines (horizontal rules), borders, and text
Spacing – Changing how elements are arranged in relation to one another on a page, AKA “breathing room”
We can toggle these CSS property changes instantly using animatable CSS. This is extremely useful in many instances. However, the animated approach embraces a little more creativity.
Breaking Down Properties, Values, and Units
Duration
One of the primary considerations in animatable CSS is duration. While property changes are instant by default, many CSS animations happen over time. Say you want to add that underline to a hovered link. Wouldn’t it be elegant if our browser drew that underline in a few seconds instead?
Duration is usually defined using transition or transition-duration. Some browsers handle this functionality a little differently than others. Using a vendor prefix might be necessary. Chrome, Safari, and Opera use WebKit as a rendering engine. CSS rules occasionally need the -webkit- prefix attached to certain properties. This is written as so:
.element { transition-duration: 3s; }
We might want a transition to occur, yet prefer to delay that initial transformation after triggering it. We can express this as transition-delay. All duration-based CSS values are expressed in seconds or milliseconds.
Repetition
Animations often happen only once. However, we can make these properties animate between states endlessly in a loop. Webpages may have static elements that change colors repeatedly—from orange to green and back to orange, so on and so forth. This can happen passively as users browse. It can also be triggered via action, such as hovering your cursor over elements. This is purely aesthetic or draws attention to important areas.
Transform and Translate
We know how important time is to animations and transitions. We haven’t yet jumped into transformations, or the movement of page elements from one location to the next. Transformations—including translations—can affect how web elements permanently appear on the page. They also occur in response to user events.
Most people have encountered toggles before. The translation value determines how that toggle slides within its container after clicking or tapping. This provides its responsiveness. We’d tell an element to translate like so:
.element { transform: translateX(20px); }
Translations are unique and require some extra considerations. If we want an object to move left or right, we use translateX as seen above. Think about a basic graph. The X-axis extends left to right. Conversely, we’d move an object up or down by using translateY. Either case lets us use positive or negative numbers to denote direction.
Translations use a couple of units. We can use percentages or lengths (px or em). This allows for plenty of fine tuning—especially important when precision is needed.
Steps and Keyframes
Say we have an element located at Point A, and we know we want to move it to Point B. While duration alone is great for making smoother, simplified animations, we might want to accomplish this effect in steps. Where have we seen these before?
These CSS animations occur in pre-configured numbers of steps. We can use this to conveniently animate a CSS clock. This clock ticks every 60 seconds, and moves 60 total steps per hour before the minute hand rotates 360 degrees. We can write this like so:
This is a great example of using steps in conjunction with CSS @keyframes. What are these exactly? @Keyframes are animations created by gradually shifting between CSS styles. This can happen in stages denoted in percentages from 0% to 100% (start to finish). We can also tell an element to move from a location to another. This type of action uses units of length, like px.
Keyframes are great tools for applying styles and position changes. They’re also browser sensitive. Writing a functional CSS @keyframe animation requires a vendor prefix for each browser your visitors might use. Those look like this:
-webkit- (Chrome, Safari, newer versions of Opera)
-moz- (Firefox)
-o- (older versions of Opera)
-ms- (Internet Explorer and Edge)
Including a prefix is an easy way to ensure compatibility.
Quick Notes on Spacing
When applying animations to elemental spacing, it’s useful to tweak margin and padding. These properties are pretty easy to work with, accepting both positive and negative units like translations do.
Envision a blank webpage with two pictures stacked vertically. We want to change the bottom picture’s position in relation its neighbor above. It might be useful to use translations, but we can also adjust margins. If we increase the bottom picture’s top margin over a span of 3s, that picture will appear to slide down and away from its counterpart.
We can do similar things with padding, which can also change how the content within the container appears.
Animatable CSS is Indispensable
Animating CSS properties allows us to add effortless creativity to our projects. Some of the most engaging designs across the web rely on animatable CSS, which is always growing to accommodate new standards. Best of all, these rules are approachable and easy to learn. We hope you’ve enjoyed our guide, and happy coding!