.animation_1{
    animation: wobble 5s ease-in-out infinite;
    transform-origin: center bottom;
    transition: padding .3s, bottom .3s;
}
@keyframes anim_1 {
    33% {
        transform: rotate(5deg);
    }
    66% {
        transform: rotate(-5deg);
    }
}
.animation_2{
    animation: wobble 5s ease-in-out infinite;
    transform-origin: center bottom;
    transition: padding .3s, bottom .3s;
}

.animation_3{
    animation: anim_3 2s linear infinite;
}




@keyframes anim_3 {
    0%{
        transform: rotate(90deg);
    }
    100%{
        transform: rotate(60deg);
    }
}


@keyframes anim_2 {
    33% {
        transform: rotate(5deg);
    }
    66% {
        transform: rotate(-5deg);
    }
}

.animation_4 {
    animation: mirrorflip 10s 0s linear infinite;
}

@keyframes mirrorflip {
    0% {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);

    }
    50% {
        transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -moz-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
    }
    100% {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
    }
}


.back {
    -webkit-transform: rotateY(180deg);
    background: #3498db;
}

.front {
    z-index: 2;
    background: #2ecc71;
}

.flip-container .flipper,
.flip-container.hover .flipper {
    animation: flipY 3s infinite;
}

.flip-container p {
    margin: 10px 0;
    text-align: center;
}

.vertical-flip-container .back {
    -webkit-transform: rotateX(180deg);
}

.vertical-flip-container .flipper,
.vertical-flip-container.hover .flipper {
    animation: flipX 4s infinite;
}

.bookflip-container .flipper {
    -webkit-transform-origin: 0;
}

/* Flip Animation */
@keyframes flipX{
    from {
        -webkit-transform: rotateX(180deg);
    }

    to {
        -webkit-transform: rotateX(-180deg);
    }

}
@keyframes flipY{
    from {
        -webkit-transform: rotateY(180deg);
    }

    to {
        -webkit-transform: rotateY(-180deg);
    }

}