[해피CGI][cgimall] CSS로 구현하는 순차 등장 애니메이션

여러 도형이 순서에 따라 크기, 회전, 색상, 모양이 변화하는 CSS 애니메이션 예제입니다.
sibling-index()를 활용해 요소별로 시간차를 주어 자연스러운 흐름을 표현합니다.
반복되는 도형이나 그리드 형태의 모션 효과를 구현할 때 참고하기 좋습니다.

HTML 구조

<!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>

 

CSS 소스

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;

}

}