코딩스쿨

▶ CSS References

CSS Animatable

CSS Animatable Properties : 애니메이션 가능한 속성

CSS 애니메이션은 웹 페이지의 요소에 다양한 동적 효과를 추가할 수 있게 해줍니다. CSS에서는 애니메이션을 적용할 수 있는 **애니메이션 가능한 속성(Animatable Properties)**을 정의하여, 요소의 특정 속성이 시간에 따라 변하는 애니메이션을 만들 수 있습니다. 이 가이드는 애니메이션이 가능한 주요 CSS 속성을 설명하고, 이 속성들을 사용하는 방법을 소개합니다.

1. 애니메이션의 기본 개념

CSS 애니메이션은 @keyframes 규칙을 통해 애니메이션의 단계별 동작을 정의하고, animation 속성을 사용해 요소에 애니메이션을 적용합니다. 또는, **CSS 전환(Transitions)**을 통해 간단한 애니메이션 효과를 구현할 수 있습니다.

기본 구문:

@keyframes example {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.animated {
    animation: example 2s linear infinite;
}

위 예시는 opacity 속성에 대한 애니메이션을 정의하며, 0%에서 100%까지 불투명도가 0에서 1로 변합니다.

2. 애니메이션 가능한 주요 CSS 속성

애니메이션을 적용할 수 있는 CSS 속성은 제한되어 있으며, 모든 속성이 애니메이션될 수 있는 것은 아닙니다. 아래는 애니메이션 가능한 주요 속성 목록입니다.

2.1 색상 관련 속성

color: 텍스트 색상을 애니메이션할 수 있습니다.

예시:

@keyframes colorChange {
    0% { color: red; }
    100% { color: blue; }
}

.text {
    animation: colorChange 3s infinite;
}

background-color: 배경 색상을 애니메이션할 수 있습니다.

예시:

@keyframes bgColorChange {
    0% { background-color: yellow; }
    100% { background-color: green; }
}

.box {
    animation: bgColorChange 4s infinite;
}

border-color: 테두리 색상을 애니메이션할 수 있습니다.

예시:

@keyframes borderColorChange {
    0% { border-color: black; }
    100% { border-color: red; }
}

.bordered {
    animation: borderColorChange 5s infinite;
}

box-shadow: 그림자 색상과 크기를 애니메이션할 수 있습니다.

예시:

@keyframes shadowChange {
    0% { box-shadow: 0px 0px 5px 0px black; }
    100% { box-shadow: 0px 0px 20px 0px red; }
}

.shadowed {
    animation: shadowChange 3s infinite;
}

2.2 크기 및 레이아웃 관련 속성

width: 요소의 너비를 애니메이션할 수 있습니다.

예시:

@keyframes widthChange {
    0% { width: 100px; }
    100% { width: 200px; }
}

.box {
    animation: widthChange 2s infinite;
}

height: 요소의 높이를 애니메이션할 수 있습니다.

예시:

@keyframes heightChange {
    0% { height: 100px; }
    100% { height: 300px; }
}

.box {
    animation: heightChange 2s infinite;
}

margin: 요소의 외부 여백을 애니메이션할 수 있습니다.

예시:

@keyframes marginChange {
    0% { margin-left: 10px; }
    100% { margin-left: 50px; }
}

.margined {
    animation: marginChange 1.5s infinite;
}

padding: 요소의 내부 여백을 애니메이션할 수 있습니다.

예시:

@keyframes paddingChange {
    0% { padding: 10px; }
    100% { padding: 30px; }
}

.padded {
    animation: paddingChange 2.5s infinite;
}

border-width: 테두리 두께를 애니메이션할 수 있습니다.

예시:

@keyframes borderWidthChange {
    0% { border-width: 1px; }
    100% { border-width: 10px; }
}

.bordered {
    animation: borderWidthChange 3s infinite;
}

2.3 위치 및 변환 관련 속성

transform: 요소의 크기, 회전, 이동을 애니메이션할 수 있습니다.
- 예시:
```
@keyframes moveRotate {
    0% { transform: translateX(0px) rotate(0deg); }
    100% { transform: translateX(100px) rotate(360deg); }
}

.moving {
    animation: moveRotate 4s infinite;
}
```
- translateX(), translateY(): X축 또는 Y축으로 요소를 이동합니다.
- rotate(): 요소를 회전시킵니다.
- scale(): 요소의 크기를 변환합니다.

top, right, bottom, left: 요소의 위치를 애니메이션할 수 있습니다.

예시:

@keyframes positionChange {
    0% { top: 0px; }
    100% { top: 100px; }
}

.positioned {
    animation: positionChange 2s infinite;
    position: relative;
}

2.4 투명도 및 시각적 효과

opacity: 요소의 투명도를 애니메이션할 수 있습니다.

예시:

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fading {
    animation: fade 3s infinite;
}

visibility: 요소가 보이거나 숨겨지는 것을 애니메이션할 수 있습니다.

예시:

@keyframes toggleVisibility {
    0%, 100% { visibility: visible; }
    50% { visibility: hidden; }
}

.toggle {
    animation: toggleVisibility 2s infinite;
}

2.5 기타 애니메이션 가능한 속성

z-index: 요소의 쌓이는 순서를 애니메이션할 수 있습니다.

예시:

@keyframes zIndexChange {
    0% { z-index: 1; }
    100% { z-index: 10; }
}

.z-indexed {
    animation: zIndexChange 3s infinite;
}

filter: 이미지나 요소에 적용된 필터를 애니메이션할 수 있습니다.
- 예시:
```
@keyframes blurEffect {
    0% { filter: blur(0px); }
    100% { filter: blur(5px); }
}

.blurred {
    animation: blurEffect 3s infinite;
}
```
- blur(): 요소를 흐리게 만듭니다.
- brightness(): 요소의 밝기를 변경합니다.
- contrast(): 요소의 대비를 변경합니다.

clip-path: 요소의 클리핑 영역을 애니메이션할 수 있습니다.

예시:

@keyframes clipPathChange {
    0% { clip-path: circle(0% at 50% 50%); }
    100% { clip-path: circle(50% at 50% 50%); }
}

.clipped {
    animation: clipPathChange 4s infinite;
}

3. CSS 전환(Transition)과 함께 사용

애니메이션 외에도 **전환(Transitions)**을 사용하면 속성이 일정한 시간에 걸쳐 변화하도록 설정할 수 있습니다.

구문:

transition: property duration timing-function

delay;


- **예시**:

```css
.box {
    width: 100px;
    transition: width 2s;
}

.box:hover {
    width: 200px;
}

요약

CSS 애니메이션은 다양한 속성에 대해 동적인 효과를 추가할 수 있게 해줍니다. 크기, 색상, 투명도, 위치, 필터 등 다양한 속성을 애니메이션화하여 사용자 경험을 개선할 수 있으며, @keyframes와 animation 속성 또는 transition 속성을 사용하여 CSS 애니메이션을 구현할 수 있습니다. 애니메이션 가능한 속성들을 적절히 활용하면 웹 페이지를 보다 생동감 있게 만들 수 있습니다.

코딩 스쿨 CSS