Advanced CSS for animations
The transition property facilitates common animation effects; however, it is crucial to explore additional resources to enhance user experience and the perceived value of our application.
To craft more intricate animations, it’s beneficial to acquaint ourselves with complementary properties that, when integrated, can produce compelling and impressive CSS animations.
CSS positioning
The position property specifies how an element should be positioned within its containing element. There are five possible values for the position property: static, relative, fixed, absolute, and sticky. Each value determines how the element interacts with its surroundings and how it is positioned on the page:
position: static: This is the default value. Elements withposition: staticare positioned according to the normal flow of the document. They are not affected by thetop,bottom,left, andrightproperties.
Figure 5.7 – position: static representation
position: relative: Elements withposition: relativeare positioned relative to their normal position in the document flow. This property allows us to use thetop,bottom,left, andrightproperties to move them from their original position.
Figure 5.8 – position: relative representation
position: fixed: Elements withposition: fixedare positioned relative to the viewport, meaning they remain in the same place even when the page is scrolled. We can use thetop,bottom,left, andrightproperties to specify their position.
Figure 5.9 – position: fixed representation
position: absolute: Elements withposition: absoluteare positioned relative to the nearest positioned ancestor. If no positioned ancestor is found, they are positioned relative to the initial containing block, usually the<html>element. They are removed from the normal document flow and can overlap with other elements, as if they are in a layer on top of the original document.
Figure 5.10 – position: absolute representation
The position property in CSS enables us to modify the positioning of elements within our application.
We can adjust their placement based on the layout of their parent elements or in response to scrolling events. This capability provides us with a valuable tool for crafting intricate animations and achieving more dynamic and engaging user experiences.
z-index
When we assign the position property to an element, it enables us to utilize the z-index property. The z-index property governs the stacking order of an element, deciding whether it should be positioned in front of or behind other elements.
Its value is a numerical integer, which can be positive (higher layers) or negative (lower layers), with 0 often serving as the reference point within the application code.
Figure 5.11 – z-index representation
Understanding z-index is important for animating with CSS because it allows us to control the stacking order of elements. This is crucial for managing overlapping effects, creating depth perception, and ensuring interactive elements remain visible during animations, which all contribute to a more polished and engaging user experience.
Opacity
CSS opacity allows us to control the transparency levels of elements. This property operates on a scale ranging from 0.0 (completely invisible) to 1 (fully visible), enabling precise adjustments to the element’s transparency.
Figure 5.12 – The opacity property representation – photo by Fahmi Fakhrudin in Unsplash
The following CSS is applied to Figure 5.12:
.image-container {
margin-right: 20px;
}
.image-container:nth-child(1) img {
opacity: 0.1;
}
.image-container:nth-child(2) img {
opacity: 0.5;
}
.image-container:nth-child(3) img {
opacity: 1;
} Opacity is an important property for creating various types of animations within CSS. It allows us to control the transparency of an element, which can be used to create effects such as fading in or out, transitions between different states, and overlay effects.
Blur
The blur property in CSS enables us to apply a blur effect to elements, enriching visual design possibilities and facilitating creative effects in web development. It functions as a CSS filter, allowing us to have precise control over the degree of blurriness applied to targeted elements.
Figure 5.13 – The blur property representation – photo by Fahmi Fakhrudin in Unsplash
The following CSS is applied to Figure 5.13:
.image-container:nth-child(1) img {
filter: blur(0px);
}
.image-container:nth-child(2) img {
filter: blur(3px);
}
.image-container:nth-child(3) img {
filter: blur(8px);
} While there are a lot of CSS properties that can be combined to craft compelling animations, the ones mentioned previously are among the most commonly used. They can be integrated within the transition property for state animations or within the @keyframes CSS animation for more intricate, looping animations. This is what we’ll delve into next.
