CSS 애니메이션(Animation) 속성과 키프레임(keyframes)

 

 

Javascript를 사용하지 않고 CSS 내에서도 애니메이션 효과를 적용할 수 있다.

transform과 transition 그리고 오늘 배울 animation이다.

 

앞선 transform과 transition을 포스팅하면서

transform, transition, aniamtion 3가지의 차이점에 대해 다뤄보았다.

 

 

 

---

transform, transition, animation의 차이

 

---

transform

요소의 모양, 위치, 크기 등을 변형하는 데 사용된다.

• 목적 : 요소의 위치, 크기, 회전 등을 변형하는 데 사용된다.
• 작동방식 : CSS 속성을 직접 변경하여 변형을 적용한다.
• 활용예시 : 이미지 회전, 텍스트 이동, 요소 확대/축소 등

 

---

transition

요소의 속성 변화에 생동감 있는 애니메이션 효과를 부여하는 데 사용된다.

• 목적 : 두 상태 사이의 변화를 부드럽게 애니메이션화하는 데 사용된다.
• 작동방식 : transition 속성을 사용하여 변화 속도, 지속 시간, 타이밍 등을 설정한다.
• 활용예시 : 버튼 클릭 시 색 변화, 메뉴 호버 시 나타나는 효과 등

 

---

animation

요소에 복잡한 애니메이션 효과를 부여하는 데 사용된다.

• 목적 : 시간에 따라 요소의 속성을 변화시키는 애니메이션을 만드는 데 사용된다.
• 작동방식 : @keyframes 규칙을 사용하여 애니메이션의 각 단계를 정의한다.
• 활용예시 : 로딩 애니메이션, 캐릭터 움직임, 스크롤 애니메이션 등

 

	Transform	Transition	Animation
목적	변형	상태 변화 애니메이션	시간 기반 애니메이션
작동방식	CSS 속성 직접 변경	transition 속성	@keyframes 규칙
반복	불가능	불가능	가능
트리거	없음	마우스 오버, 클릭 등	없음

 

 

 

 

 

 

Animation

CSS를 사용하여 웹 요소에 동적인 애니메이션 효과를 부여하는 기술이다.

이를 통해 요소의 위치, 색상, 회전 등을 부드럽게 변경할 수 있다.

CSS의 애니메이션은 JavaScript를 사용하지 않고 간단하게 애니메이션 효과를 만들 수 있으며,

웹 사이트의 성능을 향상시킬 수 있는 장점이 있다.

 

CSS의 Animation은 @keyframes로 정의한 animation-name을 각 요소에서 불러온다.

 

💻CSS 코드

.box {
    /* @keyframe으로 정의한 애니메이션을 불러옴 */
    animation : animation-name;
}

 

 

1. @keyframes

: @keyframes 규칙을 사용하여 애니메이션의 시간 단계를 정의하여

각 단계에서 어떤 스타일을 적용할지를 정한다.

@keyframes은 0%, 50%, 100%과 같은 단계를 정의하며, 이는 애니메이션이 시작한지 50% 시점이 지났을 때에 어떤 스타일을 적용할지를 정하는 것이다.

%로 정의할 수도 있지만 from(= 0%), to(= 100%)과 같이 단계를 정의할 수도 있다.

 

💻CSS 코드

/* 예. 원래 크기에서 1.5배, 2배로 커지도록 애니메이션 효과 정의*/
@keyframes animation-name{
    0% {
    	/* 각 단계에서 어떤 스타일을 정의할지를 씀*/
        transform : scale(1);
    }
    50% {
        transform : scale(1.5);
    }
    100% {
        transform : scale(2);
    }
}

@keyframes animation-name{
    from {
        transform : scale(1);
    }
    to {
        transform : scale(2);
    }
}

 

 

 

 

2. animation 속성

: 애니메이션을 정의하는 속성에는 여러 가지가 있다.

 

1️⃣animation-name 

: @keyframes으로 정의한 애니메이션을 참조한다.

 

2️⃣animation-duration

: 애니메이션 지속 시간을 설정한다.

s(초), ms(밀리초) 단위를 사용하여 속성값을 정의한다.

 

3️⃣animation-function

: 애니메이션 진행 속도를 조절하는 함수이다.

linear(일정속도), ease(처음과 끝에서 느리고 중간에서 빠름), ease-in(처음 느리고 점점 빨라짐), ease-out(처음 빠르고 점점 느려짐) 등의 값을 사용하여 정의한다.

 

4️⃣animation-delay

: 애니메이션 시작 지연 시간을 정의한다.

duration과 마찬가지로 s, ms 단위를 사용한다.

 

5️⃣animation-count

: 애니메이션 반복 횟수를 설정한다.

(infinite를 사용하면 무한반복 효과를 넣을 수 있음)

 

6️⃣animation-direction

: 애니메이션 재생 방향을 설정한다.

normal(정방향), reverse(역방향), alternate(정방향/역방향 반복) 등의 값을 사용한다.

 

 

7️⃣animation-fill-mode

: 애니메이션 재생이 끝난 후 요소의 스타일을 유지할지 여부를 설정한다.

none(초기 스타일로 돌아감), forwards(애니메이션 종료 스타일 유지), backwards(애니메이션 시작 스타일 유지) 등의 값을 사용한다.

 

 

8️⃣animation 단축속성

: duration | easing-function | delay | iteration-count | driection | fill-mode | play-state | name 순으로 정의된다.

하지만 적용해보니 지속시간(앞)과 지연시간(뒤) 순서만 지킨다면 어떤 속성을 먼저 적용되는지는 상관없는 것 같다.

 

💻CSS 코드

.box {
    /* 1.애니메이션 이름 */
    animation-name : animation-name;
    
    /* 2. 애니메이션 지속시간 */
    animation-duration : 2s;
    
    /* 3. 시간함수 */
	animation-timing-function : linear;
    
    /* 4. 지연시간 */
    animation-delay : 10ms;
    
    /* 5. 반복 횟수 */
    animation-iteration-count : 3;
    animation-iteration-count : infinite;
    
    /* 6. 진행방향 */
    animation-direction : reverse;
    
    /* 7. 스타일유지여부  */
    animation-fill-mode : none;
}

 

 

3. 예제

: box 크기를 움직이면서 2배가 되도록 애니메이션 효과를 적용해 보았다.

 

 

 

 

 

이상으로 animation 속성을 끝으로 CSS에서 애니메이션 효과를 적용하는 방법에 대해 다뤄보았다.

처음 속성들을 접했을 때 무슨 말인지 너무 헷갈리고 그랬는데

포스팅을 하면서 이해가 팍팍된 거 같아서 다들 한 번씩 다뤄보는 걸 추천합니다요!!

점점 CSS에 대해 끝이 보이는 것 같으면서도 아직 못 다룬 내용들이 너무 많아서 더 열심히 해야겠다는 생각도 든다.

다음 시간에는 반응형 웹에 대해 다뤄보도록 하겠다.

그럼 이만~~

  

 

---

📚지난 포스팅 리뷰하기

 

transition이란?

transform 속성에 추가로 제어 기능을 넣어주는 것이다.

동작시간, timing, 지연시간 등의 값을 넣어주면서 속성을 적용하며,

active(클릭), hover(마우스) 등의 가상 선택자로 선택한다.

 

1️⃣transiton-property : 변환시키고 싶은 속성을 선택한다.

2️⃣transition-duration : 애니메이션의 지속시간(총 시간)을 지정한다.

3️⃣transition-delay : 얼마동안 지연 후(쉬고) 변환을 시작할지를 정한다.

4️⃣transiton-timing-function : 시간함수로 애니메이션의 진행속도를 지정한다.

5️⃣transition 단축속성 : property(속성), duration(지속시간), timing-function(시간함수), delay(지연시간) 순으로 값을 넣어서 정의한다.