46 lines
1000 B
SCSS
46 lines
1000 B
SCSS
|
.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:
|