@-webkit-keyframes fromtop {
    from{
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity: 0;
    }
    to{
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fromtop{
    from{
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity: 0;
    }
    to{
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes opacity {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes opacity{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@-webkit-keyframes slideOutRight {
    from {
        width: 100%;
    }
    to {
        width: 0;
        visibility: hidden;
    }
}
@keyframes slideOutRight {
    from {
        width: 100%;
    }
    to {
        width: 0;
        visibility: hidden;
    }
}

@-webkit-keyframes slideOutTop {
    from {
        height: 100%;
    }
    to {
        height: 0;
        visibility: hidden;
    }
}
@keyframes slideOutTop {
    from {
        height: 100%;
    }
    to {
        height: 0;
        visibility: hidden;
    }
}

@-webkit-keyframes rotate{
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate{
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}