/* CSS Document */
/*
    animations.css

    JS
    document.getElementById("bookDivScroll").classList.add("grow");
*/

/* 
    Fade In
*/
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/* 
    Fade Out
*/
.fadeOut {
    animation-name: fadeOut;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeOut {
    from {
        display: block;
        opacity: 1;
    }
    to {
        display: none;
        opacity: 0;
    }
}

/* Rotate */
.rotate {
    animation-name: rotate;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes rotate {
    /*from {background-color: red;}*/
    to {
        transform: rotate(90deg);
    }
}
/* Grow */
.grow {
    animation-name: grow;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes grow {
    from {
        transform: scale(0.1, 0.1);
    }
    to {
        transform: scale(1, 1);
    }
}


/* Experimental */

/* 
    Grow Down 
    
    Needs specific grow-to height, auto doesn't work.
    Affects background but not text.
*/
.growDown {
    animation-name: growDown;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes growDown {
    from {
        transform-origin: 0% 0%;
        height:0;
    }
    to {
        transform-origin: 0% 0%;
        height: 6rem;
    }
}

/* Move */
@keyframes menuMove {
    from {
        height: 0;
    }
    to {
        height: auto;
    }
}