.blocktest {
    width: 200px;
    height: 200px;

    top:200px;

    position: absolute;
    left: 200px;

    background-color:turquoise;
}
.blocktest2 {
    width: 200px;
    height: 200px;

    top:200px;

    position: absolute;
    left: 200px;

    background-color:lawngreen;
}

.disappearing {
    animation: shrinkX .5s ease;
    animation-iteration-count: 1;
    transform-origin: 0% 50%;
}
.disappearinglr {
    animation: shrinkX .5s ease;
    animation-iteration-count: 1;
    transform-origin: 100% 50%;
}
.appearing {
    transform: scaleX(0%);

    animation: growX .5s ease;
    animation-iteration-count: 1;
    transform-origin: 100% 50%;
}
.appearinglr {
    transform: scaleX(0%);

    animation: growX .5s ease;
    animation-iteration-count: 1;
    transform-origin: 0% 50%;
}

@keyframes shrinkX {
    0% {
        transform:scaleX(100%);
    }
    100% {
        transform: scaleX(0);
    }
}

@keyframes growX {
    0% {
        transform:scaleX(0);
    }
    100% {
        transform: scaleX(100%)
    }
}

@keyframes moveLeft{
    100% {
        left: 0;
    }
}