40 lines
670 B
CSS
40 lines
670 B
CSS
|
|
||
|
|
.slide
|
||
|
|
{
|
||
|
|
transition: transform 100ms;
|
||
|
|
}
|
||
|
|
.slide-right
|
||
|
|
{
|
||
|
|
transform: translate3d(20em, 0, 0);
|
||
|
|
-webkit-transform: translate3d(20em, 0, 0);
|
||
|
|
}
|
||
|
|
.slide-left
|
||
|
|
{
|
||
|
|
transform: translate3d(-20em, 0, 0);
|
||
|
|
-webkit-transform: translate3d(-20em, 0, 0);
|
||
|
|
}
|
||
|
|
.slide-return
|
||
|
|
{
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.move
|
||
|
|
{
|
||
|
|
transition-property: opacity, transform;
|
||
|
|
transition-timing-function: ease-out;
|
||
|
|
transition-duration: 200ms;
|
||
|
|
}
|
||
|
|
.move-start
|
||
|
|
{
|
||
|
|
opacity: 0;
|
||
|
|
transform: translate3d(-2em, 0, 0);
|
||
|
|
-webkit-transform: translate3d(-2em, 0, 0);
|
||
|
|
}
|
||
|
|
.move-end
|
||
|
|
{
|
||
|
|
opacity: 1;
|
||
|
|
transform: translate3d(0, 0, 0);
|
||
|
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
|
}
|