Skip to main content
Commonmark migration
Source Link

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

CSS :nth-child() and animation properties

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

CSS :nth-child() and animation properties

Post Made Community Wiki by animusonStaffMod
Source Link
Omar
  • 31.7k
  • 2
  • 21
  • 25

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

* {
    -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;
    }
}
<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>