staggered element animation via css

transitions and delays at work

by jack gold

HTML

<div class="p">
    <div class="c">****</div>
</div>

SCSS

.p {
    width: 150px;
    height: 150px;
    margin: 10px auto;
    background: skyblue;
    transition: 0.5s width 0.3s, 0.5s height 0s;
}

.p.active {
    transition: 0.5s width 0s, 0.5s height 0.3s;
    width: 300px;
    height: 300px;

}

JavaScript

$(function () {

    $('.p').on('click', function () {

        $(this).toggleClass('active');

    });
});