上から下へフェードイン
.top_to_bottom {
transform: translate3d(0, -50px, 0);
opacity: 0;
}
.top_to_bottom_fadeIn {
transform: translate3d(0, 0, 0);
transition: 1s ease-in-out .5s;
opacity: 1;
}
下から上へフェードイン
.bottom_to_top {
transform: translate3d(0, 50px, 0);
opacity: 0;
}
.bottom_to_top_fadeIn {
transform: translate3d(0, 0, 0);
transition: 1s ease-in-out .5s;
opacity: 1;
}
左から右へフェードイン
.left_to_right {
transform: translate3d(-50px, 0, 0);
opacity: 0;
}
.left_to_right_fadeIn {
transform: translate3d(0, 0, 0);
transition: 1s ease-in-out .5s;
opacity: 1;
}
右から左へフェードイン
.right_to_left {
transform: translate3d(50px, 0, 0);
opacity: 0;
}
.right_to_left_fadeIn {
transform: translate3d(0, 0, 0);
transition: 1s ease-in-out .5s;
opacity: 1;
}
拡大しながらフェードイン
.zoom {
transform: scale(.8);
opacity: 0;
}
.zoom_fadeIn {
transform: scale(1);
transition: .5s ease-out .5s;
opacity: 1;
}