자바스크립트를 사용하지 않더라도 애니메이션을 적용할 수 있다는 사실!! 알고계셨나요~~?
우선, CSS의 기본 애니메이션 몇가지를 간단하게 살펴보겠습니다.
기본 CSS 애니메이션
1. 키프레임
키프레임은 시간이 지남에 따라 요소가 어떻게 변경되는지를 정의합니다. 애니메이션 중 특정 순간에 요소가 어떻게 보이는지를 보여주는 "스냅샷" 세트라고 생각할 수 있어요.
@keyframes를 CSS로 작성하는 방법은 다음과 같습니다.
0%(시작), 50%(중간), 100%(끝) 등 다양한 비율로 변경 사항을 설정할 수 있습니다.
예를 들어:
@keyframes example {
0% { transform: translateX(0); } /* 시작: 요소가 처음 위치에서 시작합니다. */
100% { transform: translateX(100px); } /* 끝: 요소가 오른쪽으로 100px 움직입니다. */
}
2. 타이밍 기능
시간이 지남에 따라 애니메이션이 진행되는 방식을 제어할 수 있습니다.
속도를 높이거나, 낮추거나, 일정한 속도로 움직이기를 원할 때, 타이밍 기능으로 설정할 수 있습니다.
- Linear: 일정한 속도로 움직입니다
- animation-timing-function: linear;
- Ease: 천천히 시작하여 중간에 속도가 빨라졌다가 다시 느려집니다
- animation-timing-function: ease;
애니메이션의 다양한 부분을 제어하기 위한 ease-in , ease-out 및 ease-in-out과 같은 다른 변형이 많이 있으니 찾아보면서 적용하기-!!
3. 지연
애니메이션 지연은 애니메이션이 시작되기 전의 ‘카운트다운’이라고 생각할 수 있어요.
애니메이션이 시작될 때까지 기다리는 시간을 설정할 수 있습니다.
- 시작하기 전에 2초 동안 기다리려면페이지가 로드되거나 이벤트가 트리거된 후 2초가 지나야 애니메이션이 시작됩니다.
- animation-delay: 2s;
4. 반복
애니메이션이 반복되는 횟수도 정의할 수 있습니다.
특정 숫자를 설정하거나 '무한대'를 사용하여 영원히 지속되게 할 수 있습니다.
- 예시
- animation-iteration-count: 3; animation-iteration-count: infinite;
이런 모든 사항을 종합해서 다음과 같이 사용할 수 있어요.
.element {
animation: slide 2s ease-in-out 1s 3;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
animation-fill-mode와 같은 고급 애니메이션 기능이나 더 복잡한 키프레임을 탐색하여 정교한 효과를 만들 수 있습니다.
CSS 전환(transition)
CSS 전환을 사용하면 버튼 위로 마우스를 가져가거나 링크를 클릭하는 등 요소의 상태가 변경될 때 애니메이션을 만들 수 있습니다. 즉각적인 변화 대신 전환을 통해 일정 기간에 걸쳐 점진적으로 변화가 발생합니다.
전환 작동 방식: 다음 두 가지를 정의해야 합니다.
- 애니메이션을 적용하려는 속성(예: 색상, 배경색, 너비 등)
- 전환 기간(효과가 지속되는 시간)
- 예시 - hover 효과
버튼 위로 마우스를 가져가면 배경색이 변경되기를 원한다고 했을 때, 전환이 없으면 이러한 변경은 즉각적으로 이루어집니다. 하지만 전환을 사용하면 색상을 점진적으로 변경할 수 있습니다.
< transition 없음 >
button {
background-color: blue;
}
button:hover {
background-color: red;
}
< transition >
button {
background-color: blue;
transition: background-color 0.5s ease; /* 전환에 0.5초 걸림 */
}
button:hover {
background-color: red;
}
한 번에 여러 속성에 전환을 적용하거나 전환이 시작되기 전에 지연을 추가할 수도 있습니다.
transition: background-color 0.5s ease, color 0.5s ease;
transition: background-color 0.5s ease 0.3s;
오늘 살펴본 속성들 뿐만 아니라, 원근감 및 3D 효과 등 매우 많은 기술들이 있으니 모두 적용해보는 그날까지 파이팅..!!
'1주차' 카테고리의 다른 글
웹 접근성을 고려하는 법 (0) | 2024.10.11 |
---|---|
[CSS] object-fit 과 object-position 속성으로 깔끔하게 사진과 싸움 끝! (0) | 2024.10.11 |
[CSS] font-size: 62.5% 초기화와 8pt 그리드 시스템 (0) | 2024.10.11 |
🎙️ 아리아나그란데와 웹 접근성의 관계 (0) | 2024.10.11 |
[CSS] Flex Container 속성 익히기 (0) | 2024.10.11 |