1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6<title>Center Morph Animation</title>
7<style>
8 :root{
9 --bg:#c81920;
10 --size:50px;
11 --dur:1.6s;
12 }
13
14 html,body{
15 margin:0;
16 width:100%;
17 height:100%;
18 overflow:hidden;
19 background:var(--bg);
20 }
21
22 body{
23 display:grid;
24 place-items:center;
25 }
26
27 .shape{
28 width:var(--size);
29 height:40px;
30 background:#1ea7e1;
31 transform-origin:center;
32 animation:morph var(--dur) linear infinite;
33 will-change:transform, clip-path, background-color;
34 }
35
36 @keyframes morph{
37 /* blue square */
38 0%, 12.5%{
39 background:#1ea7e1;
40 clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
41 transform:rotate(0deg) scaleX(1) scaleY(1);
42 }
43
44 /* green slight top-narrow trapezoid */
45 25%, 37.5%{
46 background:#63c74d;
47 clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
48 transform:rotate(0deg) scaleX(1) scaleY(0.95);
49 }
50
51 /* orange/red vertical wedge */
52 50%, 62.5%{
53 background:#ff5a2a;
54 clip-path:polygon(25% 8%,85% 0,85% 100%,25% 92%);
55 transform:rotate(0deg) scaleX(0.62) scaleY(1.18);
56 }
57
58 /* cyan flat trapezoid */
59 75%, 87.5%{
60 background:#1fb7d8;
61 clip-path:polygon(8% 18%,92% 18%,100% 82%,0 82%);
62 transform:rotate(0deg) scaleX(1.25) scaleY(0.42);
63 }
64
65 100%{
66 background:#1ea7e1;
67 clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
68 transform:rotate(0deg) scaleX(1) scaleY(1);
69 }
70 }
71</style>
72</head>
73<body>
74 <div class="shape"></div>
75</body>
76</html>