html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.layer-one {
    width: 200%;
    height: 200%;
    background: url('../images/tile-one.png');
    background-repeat: repeat;
    position: absolute;
    animation: kf-layer-one 26s cubic-bezier(.32,.07,.71,.94) infinite; 
}

.layer-two {
    width: 200%;
    height: 200%;
    background: url('../images/tile-two.png');
    background-repeat: repeat;
    position: absolute;
    animation: kf-layer-two 48s cubic-bezier(.32,.07,.71,.94) infinite;
}

.layer-three {
    width: 200%;
    height: 200%;
    background: url('../images/tile-three.png');
    background-repeat: repeat;
    position: absolute;
    animation: kf-layer-three 92s cubic-bezier(.32,.07,.71,.94) infinite;
}

@keyframes kf-layer-one {
    0% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(-25%, -25%, 0);
    }
    50% {
        transform: translate3d(-25%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes kf-layer-two {
    0% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(0, -25%, 0);
    }
    50% {
        transform: translate3d(-25%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes kf-layer-three {
    0% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(-25%, 0, 0);
    }
    50% {
        transform: translate3d(0, -25%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}