@media only screen and (min-width: 960px)  {
    [data-vitality] {
        position: relative;
        opacity: 0;
        transition: transform 800ms ease-in, opacity 800ms ease-in;
        transition-delay: 200ms;
    }
    .on[data-vitality] {
        transform: perspective(200px) translate3d(0,0,0);
        opacity: 1;
    }
    
    [data-vitality*='down-to-up'] {
        transform: translate3d(0,80px,0);
    }
    [data-vitality*='left-to-right'] {
        transform: translate3d(-80px,0,0);
    }
    [data-vitality*='right-to-left'] {
        transform: translate3d(80px,0,0);
    }
    [data-vitality*='up-to-down'] {
        transform: translate3d(0,-80px,0);
    }
    [data-vitality*='front-to-back'] {
        transform: perspective(200px) translate3d(0,0,80px);
    }
    [data-vitality*='back-to-front'] {
        transform: perspective(200px) translate3d(0,0,-80px);
    }
}