JSFiddle - React, Tailwind, and code Playground

by DugSohn

HTML

<div id="main">
<div class="icon" style="animation-delay: -.5s; animation-duration: .3s" ></div>
<img class="icon" style="animation-delay: -.5s; animation-duration: .3s" height="100" src="//www.kirupa.com/html5/examples/images/icon2.png" width="100">
<img class="icon" style="animation-delay: -.05s; animation-duration: .27s" height="100" src="//www.kirupa.com/html5/examples/images/icon3.png" width="100">
<img class="icon" style="animation-delay: -.2s; animation-duration: .33s" height="100" src="//www.kirupa.com/html5/examples/images/icon4.png" width="100">
<img class="icon" style="animation-delay: -.31s; animation-duration: .24s" height="100" src="//www.kirupa.com/html5/examples/images/icon7.png" width="100">
<img class="icon" style="animation-delay: -.15s; animation-duration: .25s" height="100" src="//www.kirupa.com/html5/examples/images/icon5.png" width="100">
<img class="icon" style="animation-delay: -.2s; animation-duration: .22s" height="100" src="//www.kirupa.com/html5/examples/images/icon6.png" width="100">
<img class="icon" style="animation-delay: -.3s; animation-duration: .28s" height="100" src="//www.kirupa.com/html5/examples/images/icon8.png" width="100">
<img class="icon" style="animation-delay: -.22s; animation-duration: .3s" height="100" src="//www.kirupa.com/html5/examples/images/icon9.png" width="100">
</div>

SCSS

body {
            background-color: #EFEFEF;
            padding: 25px;
        }

        #main {
            width: 450px;
        }

            #main .icon {
                padding: 20px;
                border-radius: 40px;
                background-color:#fff;
            }

                #main .icon:nth-child(2n) {
                    animation-name: keyframes1;
                    animation-iteration-count: infinite;
                    transform-origin: 50% 10%;
                }

                #main .icon:nth-child(2n-1) {
                    animation-name: keyframes2;
                    animation-iteration-count: infinite;
                    animation-direction: alternate;
                    transform-origin: 30% 5%;
                }

        @keyframes keyframes1 {
            0% {
                transform: rotate(-1deg);
                animation-timing-function: ease-in;
            }

            50% {
                transform: rotate(1.5deg);
                animation-timing-function: ease-out;
            }
        }

        @keyframes keyframes2 {
            0% {
                transform: rotate(1deg);
                animation-timing-function: ease-in;
            }

            50% {
                transform: rotate(-1.5deg);
                animation-timing-function: ease-out;
            }
        }