CSS-Animation

CSS-Animation

by Reddy Uppathi

HTML

<div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
     <div class="second-div">
        <div class="second-div">
            <div class="second-div">
                <div class="second-div">
                    <div class="second-div" >
                        <div class="second-div" >
                            <div class="second-div"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

html,
        body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div {
            border: 20px inset #5588a3;
            display: table-cell;
            animation: spin 10s ease-in-out infinite alternate;
        }
        .second-div {
          margin-left:150px;
            border: 20px inset #5588a3;
            display: table-cell;
            animation: antispin 10s ease-in-out infinite alternate;
        }

        @keyframes spin {
            from {
                border-radius: 0%;
                border: 20px inset #5588a3;
                transform: rotate(0deg);
            }

            to {
                border: 20px inset #c19191;
                border-radius: 50%;
                transform: rotate(360deg);
            }
        }
        
          @keyframes antispin {
            from {
                border-radius: 0%;
                border: 20px inset #5588a3;
                transform: rotate(360deg);
            }

            to {
                border: 20px inset #c19191;
                border-radius: 50%;
                transform: rotate(0deg);
            }
        }