CSS Animations
CSS Animations: 웹 요소에 생동감 부여하기
CSS Animations는 웹 요소가 상태를 변화시키거나 애니메이션 효과를 추가할 수 있게 해주는 강력한 도구입니다. 애니메이션을 사용하면 텍스트, 이미지, 버튼 등의 요소에 움직임을 추가하여 더욱 시각적이고 사용자와 상호작용하는 웹 디자인을 만들 수 있습니다.
1. CSS 애니메이션의 기본 개념
CSS 애니메이션은 두 가지 주요 요소로 구성됩니다:
@keyframes: 애니메이션이 일어날 단계별 상태를 정의합니다.- 애니메이션 속성: 요소가 애니메이션을 어떻게, 얼마나 오래, 어떤 방식으로 실행될지 설정합니다.
기본 구문
@keyframes animation-name {
from {
/* 초기 상태 */
}
to {
/* 최종 상태 */
}
}
.element {
animation-name: animation-name;
animation-duration: 2s;
}
@keyframes: 애니메이션의 각 단계를 정의합니다.animation-name: 실행할 애니메이션의 이름.animation-duration: 애니메이션이 실행되는 시간.
2. @keyframes: 애니메이션 단계 정의
- *
@keyframes*를 사용하여 애니메이션의 시작 상태와 끝 상태, 또는 중간 단계를 설정할 수 있습니다.
기본 구문
@keyframes animation-name {
0% {
/* 애니메이션의 시작 상태 */
}
100% {
/* 애니메이션의 끝 상태 */
}
}
예시: 색상 변하는 애니메이션
@keyframes colorChange {
0% {
background-color: lightblue;
}
100% {
background-color: lightcoral;
}
}
.element {
animation-name: colorChange;
animation-duration: 3s;
}
이 코드는 요소의 배경색이 lightblue에서 lightcoral로 3초 동안 서서히 변하는 애니메이션을 적용합니다.
3. 주요 애니메이션 속성
애니메이션을 설정할 때 사용하는 주요 속성은 다음과 같습니다.
1) animation-name
애니메이션을 적용할 때 **@keyframes**에 정의한 애니메이션의 이름을 지정합니다.
2) animation-duration
애니메이션이 실행되는 시간을 설정합니다. 단위는 초(s) 또는 **밀리초(ms)**입니다.
animation-duration: 2s;
3) animation-timing-function
애니메이션의 속도 변화를 정의합니다. 주로 다음과 같은 값들이 사용됩니다:
- ease: 느리게 시작하고, 빨라졌다가 다시 느려집니다(기본값).
- linear: 애니메이션이 일정한 속도로 실행됩니다.
- ease-in: 느리게 시작하고, 빠르게 끝납니다.
- ease-out: 빠르게 시작하고, 느리게 끝납니다.
- ease-in-out: 느리게 시작하고 끝납니다.
animation-timing-function: ease-in-out;
4) animation-delay
애니메이션이 시작되기 전 지연 시간을 설정합니다.
animation-delay: 1s;
5) animation-iteration-count
애니메이션이 얼마나 반복될지 설정합니다. 숫자나 infinite(무한 반복) 값을 가질 수 있습니다.
animation-iteration-count: 3;
6) animation-direction
애니메이션이 어떤 방향으로 진행될지 설정합니다.
- normal: 애니메이션이 처음부터 끝까지 진행됩니다(기본값).
- reverse: 애니메이션이 끝에서 시작으로 진행됩니다.
- alternate: 애니메이션이 반복될 때 한 번은 정방향, 다음 번에는 역방향으로 진행됩니다.
animation-direction: alternate;
7) animation-fill-mode
애니메이션이 끝난 후 요소가 어떤 상태에 있을지 정의합니다.
- none: 애니메이션 전후에 상태 변화를 적용하지 않습니다.
- forwards: 애니메이션이 끝난 후 마지막 상태를 유지합니다.
- backwards: 애니메이션이 시작되기 전에 시작 상태를 적용합니다.
- both: 애니메이션 전후 모두 상태 변화를 적용합니다.
animation-fill-mode: forwards;
4. 여러 애니메이션 속성 적용
여러 애니메이션 속성을 동시에 적용할 수 있습니다. animation 속성을 사용해 모든 속성을 한 줄로 작성할 수 있습니다.
기본 구문
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];
예시: 여러 애니메이션 속성 함께 사용
@keyframes moveAndChange {
0% {
background-color: lightblue;
transform: translateX(0);
}
100% {
background-color: lightcoral;
transform: translateX(200px);
}
}
.element {
animation: moveAndChange 4s ease-in-out 1s infinite alternate forwards;
}
이 코드는 요소가 배경색을 바꾸면서 200px 오른쪽으로 이동하며, 4초 동안 변하고 1초 지연 후 무한 반복되며, 정방향-역방향으로 애니메이션이 진행됩니다.
5. 실전 예시: 버튼에 애니메이션 효과 적용
예시: 호버 시 버튼에 애니메이션 적용
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
button {
padding: 10px 20px;
background-color: lightcoral;
border: none;
animation: bounce 1s ease infinite;
}
button:hover {
background-color: lightgreen;
}
이 코드는 버튼이 위아래로 튀는(bounce) 애니메이션을 무한 반복하며, hover 시 배경색이 바뀌는 효과를 적용합니다.
6. 실전 예시: 카드 플립 애니메이션
애니메이션을 사용하여 요소가 회전하면서 앞면과 뒷면이 전환되는 카드 플립 효과를 만들 수 있습니다.
예시: 카드 플립 애니메이션
.container {
perspective: 1000px;
}
.card {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}
.card .front, .card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card .back {
transform: rotateY(180deg);
}
이 코드는 카드가 Y축을 기준으로 180도 회전하는 애니메이션을 적용하여 앞면과 뒷면이 전환되는 효과를 만듭니다.