CSS Transitions
CSS Transitions: 부드러운 애니메이션 효과 적용하기
CSS Transitions는 요소의 상태 변화가 애니메이션 효과처럼 부드럽게 나타나도록 만들어주는 CSS 기술입니다. 예를 들어, 버튼의 색상이 바뀌거나 크기가 변하는 등의 변화가 즉각적으로 적용되지 않고 일정한 시간 동안 서서히 변하는 효과를 제공합니다. 호버 효과, 클릭 이벤트 또는 상태 변화 시 CSS 속성의 변화를 자연스럽게 처리할 수 있습니다.
1. CSS Transitions의 기본 개념
transition 속성은 CSS 속성의 변화를 시간에 걸쳐 서서히 적용할 수 있게 해줍니다. 예를 들어, 배경 색상이나 크기가 바뀔 때 부드럽게
변형됩니다.
기본 구문
transition: [property] [duration] [timing-function] [delay];
- property: 변화를 적용할 CSS 속성(예:
width,background-color). - duration: 변화가 일어나는 시간(예:
2s). - timing-function: 변화가 일어나는 속도 곡선(예:
ease,linear). - delay: 변화를 시작하기 전의 지연 시간(예:
1s).
예시: 기본 Transition 적용
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: background-color 2s;
}
.box:hover {
background-color: lightcoral;
}
이 코드는 hover 상태에서 2초 동안 배경 색상이 lightblue에서 lightcoral로 부드럽게 변경되는 효과를 만듭니다.
2. transition-property: 어떤 속성을 변환할지 지정
transition-property 속성은 어떤 CSS 속성에 변환 효과를 적용할지 지정합니다. width,
height, background-color 등 다양한 CSS 속성에 대해 변환을 적용할 수 있습니다.
예시: 배경색과 너비에 Transition 적용
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
transition-property: background-color, width;
transition-duration: 2s;
}
.box:hover {
background-color: lightcoral;
width: 200px;
}
이 코드는 hover 시 배경색과 너비가 동시에 2초 동안 변경됩니다.
3. transition-duration: 변화 시간 지정
transition-duration 속성은 속성이 변화하는 데 걸리는 시간을 지정합니다. 단위는 초(s) 또는
**밀리초(ms)**를 사용합니다.
예시: 변화 시간이 다른 속성 적용
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: width 1s, height 3s;
}
.box:hover {
width: 200px;
height: 200px;
}
이 코드는 너비는 1초, 높이는 3초에 걸쳐 서서히 변화하는 효과를 적용합니다.
4. transition-timing-function: 변화 속도 곡선 설정
transition-timing-function 속성은 속성이 변화하는 속도의 곡선을 설정합니다. 즉, 변화가 시작부터 끝까지 일정한 속도로 일어나는지,
점점 빨라지거나 느려지는지를 조정할 수 있습니다.
주요 값
- ease: 기본값. 변화가 느리게 시작했다가 빨라지고 다시 느려집니다.
- linear: 변화가 일정한 속도로 일어납니다.
- ease-in: 변화가 느리게 시작하고 빨라집니다.
- ease-out: 변화가 빠르게 시작하고 느리게 끝납니다.
- ease-in-out: 느리게 시작하고, 중간에 빨라졌다가 다시 느려집니다.
예시: 다양한 타이밍 함수 적용
.box {
width: 100px;
height: 100px;
background-color: lightyellow;
transition: width 2s ease-in-out, height 2s linear;
}
.box:hover {
width: 200px;
height: 200px;
}
이 코드는 너비 변화는 ease-in-out(느리게 시작해 빠르게 변한 뒤 다시 느려짐)으로, 높이 변화는
linear(일정한 속도)로 처리됩니다.
5. transition-delay: 변화가 시작되기 전 지연 시간 설정
transition-delay 속성은 변환이 시작되기 전의 지연 시간을 설정합니다.
예시: 1초 지연 후 Transition 시작
.box {
width: 100px;
height: 100px;
background-color: lightgray;
transition: background-color 2s ease-in-out 1s;
}
.box:hover {
background-color: pink;
}
이 코드는 hover 시 1초 지연 후 배경 색상이 2초 동안 부드럽게 변합니다.
6. 다중 속성에 Transition 적용
CSS Transitions는 여러 속성에 대해 동시에 적용할 수 있습니다. 속성들을 쉼표(,)로 구분해 나열하면 됩니다.
예시: 여러 속성에 Transition 적용
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(0deg);
transition: background-color 1s, width 2s, transform 3s;
}
.box:hover {
background-color: lightgreen;
width: 200px;
transform: rotate(180deg);
}
이 코드는 hover 시 배경 색상은 1초, 너비는 2초, 회전은 3초에 걸쳐 부드럽게 변화합니다.
7. 실전 예시: 버튼에 Transition 효과 적용
Transition을 버튼에 적용하여 마우스를 올렸을 때 부드러운 변화를 줄 수 있습니다.
예시: 버튼에 색상, 크기, 테두리 Transition 적용
button {
padding: 10px 20px;
background-color: lightcoral;
border: 2px solid transparent;
transition: background-color 0.5s, transform 0.5s, border 0.5s;
}
button:hover {
background-color: lightgreen;
border: 2px solid lightcoral;
transform: scale(1.1);
}
이 코드는 버튼에 마우스를 올렸을 때 배경색, 테두리, 크기가 동시에 0.5초 동안 변하는 부드러운 효과를 제공합니다.
8. 실전 예시: 카드에 Transition 효과 적용
카드 디자인에서 Transition을 활용해 마우스 오버 시 카드의 크기, 그림자, 내용이 자연스럽게 바뀌는 효과를 만들 수 있습니다.
예시: 카드 요소에 Transition 적용
.card {
width: 300px;
height: 200px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
이 코드는 카드에 마우스를 올리면 크기가 1.05배 확대되고, 그림자가 커지는 효과를 0.3초 동안 부드럽게 적용합니다.