.c-block { $duration: 1s; $delay: 0.3s; > .c-block__bg { will-change: transform; transform-origin: 100% 100%; transition: transform $duration; transform: scale3d(1, 1, 1); } &.state-1 > .c-block__bg { transform-origin: 100% 100%; transition: transform $duration; transform: scale3d(0.5, 1, 1); } &.state-2 > .c-block__bg { transform-origin: 100% 100%; transform-origin: 100 100; transition: transform $duration; transform: scale3d(0.5, 0.5, 1); } > .c-block__img { will-change: opacity, transform; transform-origin: 0 0; transition: opacity $duration $delay ease-in, transform $duration; opacity: 1; transform: none; } &.state-1 > .c-block__img { transition: opacity $duration $delay ease-out, transform $duration; opacity: 0; transform: translate(50%, 0) scale(1.3); } &.state-2 > .c-block__img { opacity: 0; transform: translate(50%, 50%) scale(2); } } // vim:set filetype=scss: