CSS의 animation은 단어 그대로 html에 애니메이션을 입힐 수 있는 속성입니다.
animation의 활용법은 무궁무진합니다.
가끔 코드팬을 둘러보면 무척 재밌고 유쾌한 코드들이 많이 있습니다
시간이 있으실 경우 구글에 “codepen animation”이라고 검색해 보시면 다양한 개성의 코드들을 만나 보실 수 있을 겁니다.
실 사용법:
marquee 효과:
파도 애니메이션:
위처럼 다양한 애니메이션을 넣어주실 수 있습니다. 어떤 분은 버튼에, 어떤 분은 백그라운드에, 어떤 분은 푸터에 애니메이션을 넣기도 합니다.
아래는 animation 속성에 대한 딱딱한 지식이 제공될 겁니다.
다소 난해할 수 있습니다만, 위 예제들을 참고하시면서 이 값 저 값을 넣어보면 금방 익숙해지실 겁니다.
그럼 앞으로 VS Code에서 다양한 코드를 실험해보시면서 재밌는 animation 코드들을 만들어보시기를 바랍니다!
CSS 애니메이션의 구성 요소
CSS 애니메이션은 두 가지 방식으로 구성됩니다:
1. @keyframes
- 애니메이션의 단계별 상태를 정의합니다.
- from(0%)과 to(100%)를 사용하거나, 중간 단계를 0% ~ 100%로 나눠 정의할 수 있습니다.
- 예:
@keyframes example {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}
@keyframes example {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
2. CSS 속성 설정
- animation 속성이나 개별 속성을 사용하여 애니메이션을 요소에 적용합니다.
div {
width: 100px;
height: 100px;
background-color: blue;
animation: example 2s ease-in-out infinite;
}
CSS 애니메이션의 주요 속성
animation-name
- 설명: 애니메이션에 사용할 @keyframes 이름을 지정합니다.
- 사용 예시: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { animation-name: fadeIn; }
animation-duration
- 설명: 애니메이션이 한 번 실행되는 데 걸리는 시간을 설정합니다.
- 단위: 초(s), 밀리초(ms)
- 기본값: 0s (애니메이션 없음)
- 사용 예시: .box { animation-duration: 2s; /* 애니메이션이 2초 동안 실행 */ }
animation-timing-function
- 설명: 애니메이션이 진행되는 동안의 가속도와 감속도를 설정합니다.
- 값:
- linear: 일정한 속도
- ease: 느리게 시작 → 빨라짐 → 느리게 끝남 (기본값)
- ease-in: 느리게 시작
- ease-out: 느리게 끝남
- ease-in-out: 느리게 시작하고 끝남
- cubic-bezier(x1, y1, x2, y2): 사용자 정의 곡선
- 사용 예시: .box { animation-timing-function: ease-in-out; }
animation-delay
- 설명: 애니메이션이 시작되기 전에 대기하는 시간을 설정합니다.
- 단위: 초(s), 밀리초(ms)
- 기본값: 0s (지연 없음)
- 음수 값: 애니메이션이 중간부터 시작합니다. (예: 2s는 애니메이션이 이미 2초 실행된 상태에서 시작)
- 사용 예시: .box { animation-delay: 1s; /* 애니메이션 시작 전 1초 대기 */ }
animation-iteration-count
- 설명: 애니메이션 반복 횟수를 설정합니다.
- 값:
- 숫자 값: 정해진 횟수만큼 반복
- infinite: 무한 반복
- 기본값: 1 (한 번 실행)
- 사용 예시: .box { animation-iteration-count: infinite; /* 무한 반복 */ }
animation-direction
- 설명: 애니메이션의 재생 방향을 설정합니다.
- 값:
- normal(기본값): 정방향으로 실행
- reverse: 역방향으로 실행
- alternate: 정방향 → 역방향 교대로 실행
- alternate-reverse: 역방향 → 정방향 교대로 실행
- 사용 예시: .box { animation-direction: alternate; /* 정방향-역방향 교대로 실행 */ }
animation-fill-mode
- 설명: 애니메이션이 실행되기 전(animation-delay 동안)과 종료 후 상태를 설정합니다.
- 값:
- none(기본값): 애니메이션 실행 전후의 스타일 변경 없음
- forwards: 애니메이션 종료 후 마지막 상태 유지
- backwards: 애니메이션 시작 전 첫 번째 상태 유지
- both: forwards와 backwards 효과를 모두 적용
- 사용 예시: .box { animation-fill-mode: forwards; /* 애니메이션 종료 후 상태 유지 */ }
animation-play-state
- 설명: 애니메이션의 재생 여부를 제어합니다.
- 값:
- running: 애니메이션 재생
- paused: 애니메이션 일시정지
- 사용 예시: .box { animation-play-state: paused; /* 애니메이션 일시정지 */ }
animation 압축형 사용하는 방법
- animation은 위에 적은 예시들을 순서대로 한 코드에 집약할 수 있습니다.
- 순서는 이시이지반방마입니다.
다같이 따라해 봅시다. 이시이지반방마! (저는 이렇게 배웠습니다.)
이시이지반방마: 이름, 시간, 이징, 지연, 반복, 방향, 마지막
이름과 시간은 필수로 적어야 합니다. - 사용 예시: animation: bounce 2s ease-in-out 1s infinite alternate both running;
728x90
반응형
'개발 > CSS' 카테고리의 다른 글
[CSS] reset.css란? reset.css 공유 (1) | 2024.11.25 |
---|---|
[CSS] transition에 대해 알아봅시다 (0) | 2024.11.21 |
display:grid 간단 사용법과 grid로 반응형 하는 법 (2) | 2024.11.18 |
display: flex;에 대해 알아봅시다 (0) | 2024.11.17 |
스크롤 바를 변경하거나 안 보이게 하는 코드 (0) | 2024.11.14 |