revision:
<div>
<div class="container">
<div class="body"></div>
<div class="mouth"></div>
<div class="beak"></div>
<div class="feather"></div>
<div class="tail"></div>
<div class="leg"></div>
</div>
</div>
<style>
:root {--body: #ff533e; --mouth: #000000; --feather: #939393; --beak-top: #e9581a; --beak-down: #aa4c21;
--leg: #00adef; --body-color: #e3edf7;}
.container { background: var(--body-color); font-family: sans-serif; height: 50vh; width: 50vw; display: flex;
align-items: center; justify-content: center; position: absolute;}
.body, .mouth, .feather, .tail, .beak, .mouth::before, .mouth::after, .leg, .leg::after, .leg::before {
position: absolute;}
.body, .mouth, .feather, .beak, .mouth::before, .mouth::after {border-radius: 50%;}
.body {top: 26px; left: 50px; height: 180px; width: 200px;transform: rotate(-17deg);
background: linear-gradient(to bottom, transparent 0%, transparent 20%, var(--body) 20%); z-index: 2;}
.mouth { background: var(--mouth); top: 20px; left: -175px; width: 100px;
height: 100px; transform: rotate(-17deg);
z-index: 5; animation: animate-mouth 1.5s forwards; animation-delay: 2s; }
@keyframes animate-mouth {
100% {left: 175px;}
}
.mouth::before {content: ""; width: 30px; height: 30px; background: white; position: absolute;
top: 20px; left: 40px;}
.mouth::after {content: ""; width: 10px; height: 10px; background: black; position: absolute;
top: 30px; left: 55px;
animation: animate-eye 1s infinite; animation-delay: 4s;}
@keyframes animate-eye {
50% { height: 5px;}
}
.feather {z-index: 4; left: 44px; top: -206px; width: 150px; height: 150px;
background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--feather) 50%);
transform: rotate(-17deg); animation: animate-feather 1.5s forwards; animation-delay: 2s;}
@keyframes animate-feather {
100% { top: -6px; }
}
.tail {width: 150px; height: 60px; background-color: var(--mouth);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%); top: 92px; left: 324px; transform: rotate(-17deg);
z-index: 3; animation: animate-tail 1.5s forwards; animation-delay: 2s;}
@keyframes animate-tail {
100% {left: -24px;}
}
.beak {height: 100px; width: 100px; background: linear-gradient(to bottom, var(--beak-top) 0%,
var(--beak-top) 15%, transparent 15% ); left: 224px; top: 240px; z-index: -1;
transform: rotate(-17deg); animation: animate-beak 1.5s forwards; animation-delay: 2s;
}
@keyframes animate-beak {
100% {top: 40px;}
}
.leg {background: var(--leg); height: 50px; width: 10px; border-radius: 10px; top: 515px;
left: 125px; transform: rotate(-15deg); z-index: 1; animation: animate-leg 1.5s forwards;
animation-delay: 2s;}
@keyframes animate-leg {
100% { top: 215px;}
}
.leg::before {bottom: -8px; content: ""; width: 40px; height: 9px;
background: var(--leg); border-radius: 10px;
transform: rotate(15deg); z-index: -1; }
.leg::after { top: -8px; content: ""; width: 30px; height: 9px;
background: var(--leg); border-radius: 10px; transform: rotate(-15deg); z-index: -1;}
</style>
<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>
<div>
<div class="B_container">
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
<div class="flex">
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
<div class="cube">
<div class="wall front"></div>
<div class="wall back"></div>
<div class="wall left"></div>
<div class="wall right"></div>
<div class="wall top"></div>
<div class="wall bottom"></div>
</div>
</div>
</div>
<style>
/* basic style */
.B_container {position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center;
height: 100vh; margin: 0; background-image: radial-gradient(circle at 0% 30%, red, blue);
-webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.flex {display: flex; justify-content: center; align-items: center; width: 80px; height: 80px;
margin: 0 -80px 0 0;}
/* cube */
.cube { position: relative; width: 1px; height: 1px; margin: 0 80px 0 0; transform-style: preserve-3d;}
.wall { width: 80px; height: 80px; position: absolute; left: calc(-80px / 2); top: calc(-80px / 2);
text-align: center; line-height: 100px; border: solid 1px green; background-color: orange;}
.front {transform: translateZ(calc(80px / 2));}
.back {transform: translateZ(calc(-80px / 2)) rotateY(180deg);}
.right {transform: translateX(calc(80px / 2)) rotateY(90deg);}
.left {transform: translateX(calc(-80px / 2)) rotateY(-90deg);}
.top {transform: translateY(calc(-80px / 2)) rotateX(90deg);}
.bottom {transform: translateY(calc(80px / 2)) rotateX(-90deg);}
/* animation */
.flex:nth-of-type(4) .cube:nth-of-type(1) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s infinite;}
.flex:nth-of-type(3) .cube:nth-of-type(1) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s infinite;}
.flex:nth-of-type(4) .cube:nth-of-type(2) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s infinite;}
.flex:nth-of-type(2) .cube:nth-of-type(1) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s infinite;}
.flex:nth-of-type(3) .cube:nth-of-type(2) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s infinite;}
.flex:nth-of-type(4) .cube:nth-of-type(3) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(1) .cube:nth-of-type(1) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(2) .cube:nth-of-type(2) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(3) .cube:nth-of-type(3) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(4) .cube:nth-of-type(4) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s infinite;}
.flex:nth-of-type(1) .cube:nth-of-type(2) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;}
.flex:nth-of-type(2) .cube:nth-of-type(3) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;}
.flex:nth-of-type(3) .cube:nth-of-type(4) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s infinite;}
.flex:nth-of-type(1) .cube:nth-of-type(3) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s infinite;}
.flex:nth-of-type(2) .cube:nth-of-type(4) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s infinite;}
.flex:nth-of-type(1) .cube:nth-of-type(4) {animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s infinite;}
@keyframes rotation {
100% {transform: rotateX(270deg) rotateY(270deg);}
}
.wall { animation: color 2s linear 1.5s infinite;}
@keyframes color {
100% {background-color: skyblue;}
}
</style>
<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;}
.spinner { margin-top: 5vw; 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>
<div class="D_container">
<h3 style="color:green">Learning animations</h3>
<h4>Morph animation</h4>
<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>