﻿
#caseBlanche {
    position: relative;
    width: 42px;
    height: 42px;
    margin: 150px auto;
    -webkit-animation: preloader_6 5s infinite linear;
    -moz-animation: preloader_6 5s infinite linear;
    -ms-animation: preloader_6 5s infinite linear;
    animation: preloader_6 5s infinite linear;
}

    #caseBlanche span {
        width: 20px;
        height: 20px;
        position: absolute;
        background: red;
        display: block;
        -webkit-animation: preloader_6_span 1s infinite linear;
        -moz-animation: preloader_6_span 1s infinite linear;
        -ms-animation: preloader_6_span 1s infinite linear;
        animation: preloader_6_span 1s infinite linear;
    }

        #caseBlanche span:nth-child(1) {
            background: #2ecc71;
        }

        #caseBlanche span:nth-child(2) {
            left: 22px;
            background: #9b59b6;
            -webkit-animation-delay: .2s;
            -moz-animation-delay: .2s;
            -ms-animation-delay: .2s;
            animation-delay: .2s;
        }

        #caseBlanche span:nth-child(3) {
            top: 22px;
            background: #3498db;
            -webkit-animation-delay: .4s;
            -moz-animation-delay: .4s;
            -ms-animation-delay: .4s;
            animation-delay: .4s;
        }

        #caseBlanche span:nth-child(4) {
            top: 22px;
            left: 22px;
            background: #f1c40f;
            -webkit-animation-delay: .6s;
            -moz-animation-delay: .6s;
            -ms-animation-delay: .6s;
            animation-delay: .6s;
        }

@-webkit-keyframes preloader_6 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes preloader_6_span {
    0% {
        -webkit-transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}


@-moz-keyframes preloader_6 {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@-moz-keyframes preloader_6_span {
    0% {
        -moz-transform: scale(1);
    }

    50% {
        -moz-transform: scale(0.5);
    }

    100% {
        -moz-transform: scale(1);
    }
}

@-ms-keyframes preloader_6 {
    from {
        -ms-transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
    }
}

@-ms-keyframes preloader_6_span {
    0% {
        -ms-transform: scale(1);
    }

    50% {
        -ms-transform: scale(0.5);
    }

    100% {
        -ms-transform: scale(1);
    }
}

@-ms-keyframes preloader_6 {
    from {
        -ms-transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
    }
}

@keyframes preloader_6_span {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}
