CSS transitions for layout changes (as other elements are revealed in the DOM)?

Question

When a new block is displayed, other blocks may move around the page.

Is it possible to use CSS transitions to animate the movement of a block, when another block is displayed?

Initial state:

Subsequent state:

Eg:

• Initially only the blue block is displayed
• The green block is displayed, pushing the blue block down
• I would like the blue block to animate moving to its new position

Obligatory JSFiddle

Is it possible to animate the blue block moving to its new position? I have CSS transition set on both the blocks and their parents.

Or (as I'm beginning to suspect) are CSS transitions only for actual CSS changes, not the subsequent effects of those CSS changes?

Answer 1

You can make layout changes with CSS3 as you can animate margin, position, width, height...

The problem is triggering those layout changes. but you can use help from JS to trigger those animations via a class change.

For your example, you could do this :

FIDDLE

CSS :

.item {
    width: 150px;
    height: 150px;
    margin: 20px;
    overflow: auto;
    transition: all 0.5s ease-out;
}
.first {
    margin-top:-170px;
}

JS :

setTimeout(function () {
    document.querySelector('.first').classList.remove("first");
}, 2 * 1000)

Answer 2

There is a technique for this called FLIP (First, Last, Invert, Play) and a library implementing it called Flipping.js. It is described in this article.