CSS 애니메이션 및 전환

자바스크립트를 사용하지 않더라도 애니메이션을 적용할 수 있다는 사실!! 알고계셨나요~~?

우선, 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 효과 등 매우 많은 기술들이 있으니 모두 적용해보는 그날까지 파이팅..!!