﻿.animated {
    animation-duration: 60s;
    animation-fill-mode: both;
}

.animated.infinite {
    animation-iteration-count: infinite;
}

@keyframes shake {
    from, to {
        -moz-transform: translate3d(0, 0, 0) rotate(0.02deg);
        -webkit-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 50%, 90% {
        -moz-transform: translate3d(-10px,  10px, 0) rotate(0.02deg);
        -webkit-transform: translate3d(-10px, 10px, 0);
        -o-transform: translate3d(-10px, 10px, 0);
        -ms-transform: translate3d(-10px, 10px, 0);
        transform: translate3d(-10px, 10px, 0);
    }

    20%, 60% {
        -moz-transform: translate3d(10px, -10px, 0) rotate(0.02deg);
        -webkit-transform: translate3d(10px, -10px, 0);
        -o-transform: translate3d(10px, -10px, 0);
        -ms-transform: translate3d(10px, -10px, 0);
        transform: translate3d(10px, -10px, 0);
    }
}

.shake {
    animation-name: shake;
}