여러 도형이 순서에 따라 크기, 회전, 색상, 모양이 변화하는 CSS 애니메이션 예제입니다.
sibling-index()를 활용해 요소별로 시간차를 주어 자연스러운 흐름을 표현합니다.
반복되는 도형이나 그리드 형태의 모션 효과를 구현할 때 참고하기 좋습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pen</title>
</head>
<body>
<div class="grid" lang="njk">
{% for i in range(0, 64) %}
<div></div>
{% endfor %}
</div>
<div class="warning">
⚠️ Sorry, your browser doesn't support sibling-index()
</div>
</body>
</html>
html {
height: 100%;
background: #fcfcfc;
}
body {
display: grid;
grid-template-columns: minmax(0, 1fr);
height: 100%;
place-content: center;
margin: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
width: 100%;
max-width: min(calc(100vmin - 2rem), 40rem);
margin-inline: auto;
div {
width: 100%;
aspect-ratio: 1;
background-color: #599cb7;
animation: spin 3s cubic-bezier(.79,.14,.15,.86) infinite;
animation-delay: calc(sibling-index() * 12ms);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
border-radius: 0;
}
35% {
transform: rotate(360deg) scale(calc(sibling-index() / sibling-count() / 1.4));
background-color: #ffd100;
border-radius: 100px;
}
70%, 100% {
border-radius: 0;
transform: rotate(0deg);
}
}
/* The below is just to warn users who don't have browser support */
.warning {
background: red;
padding: 1rem;
color: white;
text-transform: uppercase;
text-align: center;
font-family: system-ui, sans-serif;
position: fixed;
top: 0;
left: 0;
right: 0;
display: none;
}
@supports not (transform: scale(calc(sibling-index() / sibling-count()))) {
.warning {
display: block;
}
}
