Leveraging Parent-Child Relationships in CSS Animations

ByEditor

Modern CSS offers excellent methods for positioning and moving elements relative to each other, such as anchor positioning. However, there are times when using traditional techniques for simple animations can save time and effort.

Elements have always been adjustable in terms of structure, like resizing and rotating. When an element’s intrinsic sizing changes, its children are also affected, which can be advantageous.

Consider a scenario where circles move towards and across each other, like this:

Our HTML might be a simple `

` element containing four child `.circle` elements:

For rotations, two approaches exist: animating the `

` parent container or each `.circle` individually.

The first option is preferable since animating each `.circle` requires multiple animations instead of one. Before proceeding, ensure each `.circle` is within the `

` element and absolutely positioned:

“`css
main {
contain: layout;
}

.circle {
position: absolute;

&:nth-of-type(1){
background-color: rgb(0, 76, 255);
}
&:nth-of-type(2){
background-color: rgb(255, 60, 0);
right: 0;
}
&:nth-of-type(3){
background-color: rgb(0, 128, 111);
bottom: 0;
}
&:nth-of-type(4){
background-color: rgb(255, 238, 0);
right: 0;
bottom: 0;
}
}
“`

To rotate the `

` element containing the circles, create a specific `.animate` class for rotation:

“`css
/* Applied on

(the parent element) */
.animate {
width: 0;
transform: rotate(90deg);
transition: width 1s, transform 1.3s;
}
“`

Then apply it to the `

` element with JavaScript when a button is clicked:

“`javascript
const MAIN = document.querySelector(“main”);
function play() {
MAIN.className = “”;
MAIN.offsetWidth;
MAIN.className = “animate”;
}
“`

It appears as though four circles are animated, but the parent container is rotated and its width changed, affecting the circles.

Each `.circle` is fixed to a corner of the `

` parent with absolute positioning. When the animation triggers — `
` gets the `.animate` class on button click — the `
` width shrinks and rotates `90deg`. This pulls each `.circle` towards the center, and the rotation causes them to switch places.

This method simplifies crafting and managing animations for simple effects. Additional animations can be layered for variations, like two squares crossing during the animation.

“`css
/* Applied on

(the parent element) */
.animate {
transform: skewY(30deg) rotateY(180deg);
transition: 1s transform .2s;

.square {
transform: skewY(30deg);
transition: inherit;
}
}
“`

The parent `

` element skews `30deg` and flips along the Y-axis, while child `.square` elements counter the distortion with the same skew, resulting in the child squares flipping positions while moving apart.

For squares to separate without flipping:

“`css
/* Applied on

(the parent element) */
.animate {
transform: skewY(30deg);
transition: 1s transform .2s;

.square {
transform: skewY(-30deg);
transition: inherit;
}
}
“`

Here, `

` skews `30deg`, while `.square` children cancel with `-30deg` skew.

Applying `skew()` on a parent rearranges children beyond typical geometry. Changes in the parent can be complemented, countered, or canceled by children, depending on the desired effect.

For scaling:

“`css
/* Applied on

(the parent element) */
.animate {
transform: rotate(-180deg) scale(.5) skewY(45deg);
transition: .6s .2s;
transition-property: transform, border-radius;

.squares {
transform: skewY(-45deg) scaleX(1.5);
border-radius: 10px;
transition: inherit;
}
}
“`

The `

` element rotates counter-clockwise (`rotate(-180deg)`), scales down (`scale(.5)`), and skews vertically (`skewY(45deg)`). The children cancel the distortion with `skewY(-45deg)` and scale horizontally (`scaleX

Discover more from WIREDGORILLA

Subscribe to get the latest posts sent to your email.

Similar Posts