Cacher is the code snippet organizer for pro developers

.animation {
    -webkit-animation: float 2s linear 0 infinite alternate;
}
.fadeIn {
    -webkit-animation-name: fadeIn
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateZ(0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0)
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut
}

@-webkit-keyframes zoomOut {
    from {
        -webkit-transform: scale(3) translateZ(0);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1) translateZ(0);
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn
}

@-webkit-keyframes zoomIn {
    from {
        -webkit-transform: scale(.1) translateZ(0);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1) translateZ(0);
        opacity: 1
    }
}

.zoom {
    -webkit-animation: zoom 1s linear infinite alternate
}

@-webkit-keyframes zoom {
    0% {
        -webkit-transform: scale(1) translateZ(0);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1.3) translateZ(0);
        opacity: .9
    }
}

.zoomOut2 {
    -webkit-animation: zoomOut2 1s ease-in-out
}

@-webkit-keyframes zoomOut2 {
    from {
        -webkit-transform: scale(3) translateZ(0);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1) translateZ(0);
        opacity: 1
    }
}

.zoomOut3 {
    -webkit-animation: zoomOut3 1s ease-in-out
}

@-webkit-keyframes zoomOut3 {
    from {
        -webkit-transform: scale(3) rotate(0) translateZ(0);
        opacity: 0
    }

    to {
        -webkit-transform: scale(1) rotate(360deg) translateZ(0);
        opacity: 1
    }
}

.moveFromLeft {
    -webkit-animation-name: moveFromLeft
}

@-webkit-keyframes moveFromLeft {
    from {
        -webkit-transform: translateX(-100%) translateZ(0);
        opacity: 0
    }

    to {
        -webkit-transform: translateX(0) translateZ(0);
        opacity: 1
    }
}

.moveFromRight {
    -webkit-animation-name: moveFromRight
}

@-webkit-keyframes moveFromRight {
    from {
        -webkit-transform: translateX(100%) translateZ(0);
        opacity: 0
    }

    to {
        -webkit-transform: translateX(0) translateZ(0);
        opacity: 1
    }
}

.moveFromTop {
    -webkit-animation-name: moveFromTop
}

@-webkit-keyframes moveFromTop {
    from {
        -webkit-transform: translateY(-100%) translateZ(0);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0) translateZ(0);
        opacity: 1
    }
}

.moveFromBottom {
    -webkit-animation-name: moveFromBottom
}

@-webkit-keyframes moveFromBottom {
    from {
        -webkit-transform: translateY(100%) translateZ(0);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0) translateZ(0);
        opacity: 1
    }
}

.rotate {
    -webkit-animation-name: rotate
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0) translateZ(0)
    }

    to {
        -webkit-transform: rotate(360deg) translateZ(0)
    }
}

.rotate2 {
    -webkit-animation-name: rotate2;
    -webkit-animation-duration: .5s
}

@-webkit-keyframes rotate2 {
    from {
        -webkit-transform: rotate(180deg) translateZ(0)
    }

    to {
        -webkit-transform: rotate(0) translateZ(0)
    }
}

.float {
    -webkit-animation-name: float
}

@-webkit-keyframes float {
    0% {
        -webkit-transform: translateY(0) translateZ(0)
    }

    100% {
        -webkit-transform: translateY(-10%) translateZ(0)
    }
}

.float2 {
    -webkit-animation-name: float2
}

@-webkit-keyframes float2 {
    0% {
        -webkit-transform: translateX(0) translateZ(0)
    }

    100% {
        -webkit-transform: translateX(-10%) translateZ(0)
    }
}