[data-animate-slide=from-bottom] {
    transition: all 0.5s ease-out;

    &:not([data-animation-state]) {
        display: none;
    }
    
    &[data-animation-state=down] {
        transform: translate(0,100%);
    }
    
    &[data-animation-state=normal] {
        transform: translate(0,0);   
    }
}

[data-animate-slide=from-top] {
    transition: all 0.5s ease-out;

    &:not([data-animation-state]) {
        display: none;
    }
    
    &[data-animation-state=up] {
        transform: translate(0,-100%);
    }
        
    &[data-animation-state=normal] {
        transform: translate(0,0);
    }
}