##CSS `:nth-child()` and `animation` properties

<!-- Begin snippet: js -->

<!-- language: lang-css -->

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    body {
        background: whitesmoke;
        text-align: center;
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;
    }
    .wrapper {
        margin: 0 auto;
    }
    .loader {
        height: .8em;
        width: .8em;
        border-radius: .2em;
        background: white;
        display: inline-block;
        opacity: 0;
        margin-top: 20px;
    }
    .loader {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
    .loader:nth-child(1n+2) {
        -webkit-animation: flipintoright 750ms 375ms infinite;
        -moz-animation: flipintoright 750ms 375ms infinite;
        animation: flipintoright 750ms 375ms infinite;
    }
    .loader:nth-child(2n+1) {
        -webkit-animation: flipintoright 750ms infinite;
        -moz-animation: flipintoright 750ms infinite;
        animation: flipintoright 750ms infinite;
    }
    @-webkit-keyframes flipintoright {
        0% {
            -webkit-transform: rotateY(0);
            background-color: yellow;
            opacity: .5;
        }
        25% {
            -webkit-transform: rotateY(90deg) scale(.75);
            opacity: .75;
            background-color: orange;
        }
        50% {
            -webkit-transform: rotateY(180deg) scale(.5);
            opacity: 1;
            background-color: red;
        }
        75% {
            -webkit-transform: rotateY(270deg) scale(.75);
            opacity: .75;
            background-color: orange;
        }
        100% {
            -webkit-transform: rotateY(360deg) scale(1);
            opacity: .5;
            background-color: yellow;
        }
    }
    @-moz-keyframes flipintoright {
        0% {
            -moz-transform: rotateY(0);
            background-color: yellow;
            opacity: .5;
        }
        25% {
            -moz-transform: rotateY(90deg) scale(.75);
            opacity: .75;
            background-color: orange;
        }
        50% {
            -moz-transform: rotateY(180deg) scale(.5);
            opacity: 1;
            background-color: red;
        }
        75% {
            -moz-transform: rotateY(270deg) scale(.75);
            opacity: .75;
            background-color: orange;
        }
        100% {
            -moz-transform: rotateY(360deg) scale(1);
            opacity: .5;
            background-color: yellow;
        }
    }
    @keyframes flipintoright {
        0% {
            -webkit-transform: rotateY(0);
            background-color: yellow;
            opacity: .5;
        }
        25% {
            transform: rotateY(90deg) scale(.75);
            opacity: .75;
            background-color: orange;
        }
        50% {
            transform: rotateY(180deg) scale(.5);
            opacity: 1;
            background-color: red;
        }
        75% {
            transform: rotateY(270deg) scale(.75);
            opacity: .75;
            background-color: orange;
        }
        100% {
            transform: rotateY(360deg) scale(1);
            opacity: .5;
            background-color: yellow;
        }
    }

<!-- language: lang-html -->

    <div class="wrapper">
        <div class="loader"></div>
        <div class="loader"></div>
        <div class="loader"></div>
        <div class="loader"></div>
        <div class="loader"></div>
        <div class="loader"></div>
        <div class="loader"></div>
        <div class="loader"></div>
        <p>Loading...</p>
    </div>

<!-- end snippet -->