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:
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?
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 :
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)