반응형
CSS 트랜지션
CSS 트랜지션은 요소의 스타일이 변경될 때 그 변화를 부드럽게 만들어주는 기능입니다. 트랜지션을 사용하면 스타일 변경을 애니메이션처럼 자연스럽게 처리할 수 있습니다.
트랜지션 기본 문법
transition-property
: 트랜지션 효과를 적용할 속성을 지정합니다.transition-duration
: 트랜지션 효과가 완료되는 데 걸리는 시간을 지정합니다.transition-timing-function
: 트랜지션 효과의 진행 속도를 지정합니다.transition-delay
: 트랜지션 효과가 시작되기 전에 대기할 시간을 지정합니다.
예제:
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: width 2s, height 2s, background-color 2s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: red;
}
트랜지션 타이밍 함수
타이밍 함수는 트랜지션 효과의 진행 속도를 제어합니다.
linear
: 일정한 속도로 진행ease
: 느리게 시작해서 빠르게 진행하고 다시 느리게 종료ease-in
: 느리게 시작ease-out
: 느리게 종료ease-in-out
: 느리게 시작하고 느리게 종료cubic-bezier(n, n, n, n)
: 베지어 곡선을 사용한 커스텀 타이밍 함수
예제:
.box {
transition: width 2s ease-in-out;
}
CSS 애니메이션
CSS 애니메이션은 키프레임을 사용하여 복잡한 애니메이션 효과를 만들 수 있습니다. 애니메이션은 요소의 스타일을 단계별로 변경할 수 있습니다.
애니메이션 기본 문법
@keyframes
: 애니메이션의 키프레임을 정의합니다.animation-name
: 애니메이션의 이름을 지정합니다.animation-duration
: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다.animation-timing-function
: 애니메이션의 진행 속도를 지정합니다.animation-delay
: 애니메이션이 시작되기 전에 대기할 시간을 지정합니다.animation-iteration-count
: 애니메이션의 반복 횟수를 지정합니다.animation-direction
: 애니메이션의 진행 방향을 지정합니다.
예제:
@keyframes example {
0% {
transform: translateX(0);
background-color: blue;
}
50% {
transform: translateX(100px);
background-color: green;
}
100% {
transform: translateX(0);
background-color: blue;
}
}
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: example 4s infinite;
}
애니메이션 속성
animation-name
: 애니메이션의 이름을 지정합니다.animation-duration
: 애니메이션이 완료되는 데 걸리는 시간을 지정합니다.animation-timing-function
: 애니메이션의 진행 속도를 제어합니다.animation-delay
: 애니메이션이 시작되기 전에 대기할 시간을 지정합니다.animation-iteration-count
: 애니메이션의 반복 횟수를 지정합니다. (숫자 또는infinite
)animation-direction
: 애니메이션의 진행 방향을 지정합니다. (normal
,reverse
,alternate
,alternate-reverse
)animation-fill-mode
: 애니메이션이 시작하기 전과 종료된 후의 상태를 지정합니다. (none
,forwards
,backwards
,both
)animation-play-state
: 애니메이션의 재생 상태를 지정합니다. (running
,paused
)
예제:
@keyframes example {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: example 2s ease-in-out 1s infinite alternate both;
}
결론
CSS 트랜지션과 애니메이션을 사용하면 웹 페이지에 다양한 애니메이션 효과를 추가할 수 있습니다. 트랜지션은 요소의 스타일 변경을 부드럽게 만들어주며, 애니메이션은 키프레임을 사용하여 복잡한 애니메이션 효과를 구현할 수 있습니다. 이번 글에서는 트랜지션과 애니메이션의 기본 개념과 다양한 속성에 대해 배웠습니다.
다음 글에서는 모던 레이아웃 기법에 대해 알아보겠습니다.
다음 글에서 만나요!
반응형
'웹 디자인' 카테고리의 다른 글
[웹 디자인] 22일차: 웹사이트 기획 및 와이어프레임 작성 (0) | 2024.08.22 |
---|---|
[웹 디자인] 21일차: 모던 레이아웃 기법 (0) | 2024.08.21 |
[웹 디자인] 19일차: 타이포그래피 디자인 (0) | 2024.08.19 |
[웹 디자인] 18일차: 그리드 레이아웃을 이용한 반응형 디자인 (0) | 2024.08.18 |
[웹 디자인] 17일차: 플렉스박스를 이용한 반응형 레이아웃 (0) | 2024.08.17 |