GSAP

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
		integrity="sha512-Mf/xUqfWvDIr+1B6zfnIDIiG7XHzyP/guXUWgV6PgaQoIFeXkJQR5XWh9fqAiCiRCpemabt3naV4jhDWVnuYDQ=="
		crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<style>@charset "UTF-8";

body{
  display: grid;
  place-items: center;
  height: 100vh;
}

main {
  
}

.boxes {
  display: grid;
  grid-gap: 2px;
}

.boxes li {
  width: 2rem;
  height: 2rem;
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  cursor: pointer;
  list-style: none;
}</style>
</head>
<body>
<html lang="ja">
<body>
<main>
<ul id="boxes" class="boxes">
</ul>
</main>
<script>const gridNumber = 10,
boxes = document.getElementById("boxes");
boxes.style.cssText = `
	grid-template-columns: repeat(${gridNumber}, 1fr);
	grid-template-rows: repeat(${gridNumber}, 1fr);
`;

for (let i = 0; i < gridNumber * gridNumber; i++) {if (window.CP.shouldStopExecution(0)) break;
  const li = document.createElement("li");
  boxes.appendChild(li);
  li.addEventListener("click", () => {
    animation(i);
  });
}window.CP.exitedLoop(0);

function animation(index) {
  gsap.
  to(".boxes li", 1.5, {
    scale: .6,
    opacity: 0.3,
    rotationX: 180 }).

  repeat(1).
  yoyo(true);
}
//# sourceURL=pen.js</script>
</body>
</html>

/* 
   外部依存 CSS:
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
   外部依存 JS (このデモは下記の JS にも依存します):
     - https://cdnjs.cloudflare.com/gsap.min.js
 */

@charset "UTF-8";

body{
  display: grid;
  place-items: center;
  height: 100vh;
}

main {
  
}

.boxes {
  display: grid;
  grid-gap: 2px;
}

.boxes li {
  width: 2rem;
  height: 2rem;
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  cursor: pointer;
  list-style: none;
}

/* 
   外部依存 JS:
     - https://cdnjs.cloudflare.com/gsap.min.js
   外部依存 CSS (このデモは下記の CSS にも依存します):
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
 */

const gridNumber = 10,
boxes = document.getElementById("boxes");
boxes.style.cssText = `
	grid-template-columns: repeat(${gridNumber}, 1fr);
	grid-template-rows: repeat(${gridNumber}, 1fr);
`;

for (let i = 0; i < gridNumber * gridNumber; i++) {if (window.CP.shouldStopExecution(0)) break;
  const li = document.createElement("li");
  boxes.appendChild(li);
  li.addEventListener("click", () => {
    animation(i);
  });
}window.CP.exitedLoop(0);

function animation(index) {
  gsap.
  to(".boxes li", 1.5, {
    scale: .6,
    opacity: 0.3,
    rotationX: 180 }).

  repeat(1).
  yoyo(true);
}
//# sourceURL=pen.js