* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#breaker {
    height: 200vh;
    width: 200%;
    background-color: #04A777;
    opacity: 1;
    animation: breakeranimate 2s linear;
    display: none;
    transition: all .4s ease;
    border-radius: 5px;
    z-index: 10;
    position: fixed;
}

@keyframes breakeranimate {
    0% {
        transform: translateY(100%)
    }

    50% {
        transform: translateY(-50%)
    }

    100% {
        transform: translateY(-150%)
    }
}

@-webkit-keyframes breakeranimate {
    0% {
        transform: translateY(100%)
    }

    50% {
        transform: translateY(-50%)
    }

    100% {
        transform: translateY(-150%)
    }
}

#breaker-two {
    height: 0vh;
    width: 200%;
    background-color: #080808;
    opacity: 1;
    animation: breakeranimatetwo 2s linear;
    display: none;
    transition: all .4s ease;
    z-index: 10;
    border-radius: 25px;
    position: fixed;
}

@keyframes breakeranimatetwo {
    0% {
        transform: translateX(-100%) translateY(100%)
    }

    50% {
        transform: translateX(0%) translateY(100%)
    }

    100% {
        transform: translateX(100%) translateY(100%)
    }
}

@-webkit-keyframes breakeranimatetwo {
    0% {
        transform: translateX(-100%) translateY(100%)
    }

    50% {
        transform: translateX(0%) translateY(100%)
    }

    100% {
        transform: translateX(100%) translateY(100%)
    }
}