shapes - morphism_animation

revision:

neumorphism_animation

code: 
              <div>
                <div class="A_container">
                    <div class="box"></div>
                  </div>
              </div>
              <style>
                .A_container {background: skyblue; box-sizing: border-box;  display: flex; justify-content: center; 
                  align-items: center;  width: 45vw; height: 45vh;}
                .box {border-radius: 20px; width: 60px; height: 60px; background: lightgreen; 
                  box-shadow: 0 0 0 crimson, 0 0 0 burlywood, 10px 10px 10px crimson inset, 
                  -10px -10px 10px burlywood inset; animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s
                   infinite alternate; /* animation-fill-mode: forwards; */}
      
                @keyframes anime {
                  0% {width: 60px;height: 60px; background: lightgreen; box-shadow:   0 0 0 crimson, 0 0 0 burlywood, 
                    10px 10px 10px crimson inset, -10px -10px 10px burlywood inset;}
                  25% {width: 60px; height: 60px; background: seagreen; box-shadow:  10px 10px 10px crimson, 
                    10px 10px 10px burlywood, 0 0 0 crimson inset, 0 0 0 burlywood inset;}
                  50% { width: 60px; height: 240px; background: burlywood; box-shadow:  10px 10px 10px lightgreen, 
                    10px 10px 10px crimson, 0 0 0 lightgreen inset,  0 0 0 crimson inset; }
                  100% { width: 480px; height: 240px; background: burlywood; box-shadow:  40px 40px 40px 
                    lightgreen, 0 0 0 crimson, 0 0 0 lightgreen inset,  2px 2px 2px crimson inset;}
                }
              </style>

morphism

Learning how to animate

Morph animation

code: 
              <div class="C_container">
                <h3 style="color:green">Learning how to animate</h3>
                <h4>Morph animation</h4>
                <div class="spinner"></div>
              </div>
              <style>
                  .C_container{ display: grid; place-items: center;height: 40vh;}
                  .spinner { margin-top: 2vw; width: 10vw;  height: 10vw; animation: Morph 2000ms infinite; }
                  @keyframes Morph {
                    0%, 100% { border-radius: 50%; transform: rotate(0deg); background-color: orange;}
                    50% {border-radius: 0%; transform: rotate(180deg); background-color: green;}
                  }
              </style>

morph animation

code: 
              <div class="D_container">
                <div class="spinner2"></div>
              </div>
              <style>
                .D_container{display: grid; place-items: center;}
                .spinner2 {width: 10vw; height: 10vw; animation: Morphing 3500ms infinite;}
                @keyframes Morphing {
                  0%, 100% {clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: rotate(0deg);
                     background-color: rgb(255, 0, 0);}
                  50% {clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%); transform: rotate(180deg); 
                    background-color: rgb(255, 238, 0); }
                }
              </style>