blog
copyright ©
creamu Inc. All Rights Reserved.
art direction & design: Kunitaka Kawashimo
code, interaction & photography: creamu Inc.
category: Technology

css transitionの書き方

Pocket

.class {
opacity: 0;
transition: all 1.8s .3s cubic-bezier(0.19, 1, 0.22, 1);
transform: translateY(40px);
}
.class.is-show {
opacity: 1;
transform: translateY(0);
}

transitionは以下。
transition: all 時間 delay easeout;
40px下から、0.3秒後にy座標pxに浮き上がる。