Ask questions, find answers and collaborate at work with Stack Overflow for Teams.
Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
##CSS :nth-child() and animation properties
:nth-child()
animation
* { -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>