[속성] 애니메이션 속성을 통해 전환 효과 제어

 

 

 

---

 

속성 값을 애니메이션처럼 자연스럽게 전환하려면 어떻게 할까?

 

 

---

 

 

 

 

애니메이션 속성

 

--

기존 전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어하는 속성이다.

 

주요 문법 구성으로

애니메이션을 적용할 "스타일 속성"과 "키 프레임(@keygrames)"이다.

 

 

키 프레임

애니메이션은 정지된 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 한다.

 

즉, 키 프레임 애니메이션이 진행되는 과정에서

특정 시점에 발생해야 하는 여러 작업을 정의하는 문법이다.

(시작과 종료에 해당하는 최소 2개 시점에 대한 스타일로 정의)

 

기본 형식

@keyframes 키 프레임명 {
    0%{/* CSS 코드 */}
    n%{/* CSS 코드 */}
    100%{/* CSS 코드 */}
}

특정 시점은 %로 지정한다.
- 애니메이션 시작  :  0%
- 애니메이션 종료  :  100%
- 애니메이션 중간 어딘가  :  n%

여기서 시작과 종료를 "from", "to" 키워드로 대체할 수도 있다.
- 0% = from
- 100% = to

--

 

 

 

 

animation-name 속성

 

--

특정 요소에서 적용할 "키 프레임"명을 지정하는 속성이다.

 

기본 형식

animation-name: 키 프레임명;

 

예시 코드

animation-name: bgchange;

--

 

 

 

 

animation-duration 속성

 

--

애니메이션을 지속할 시간을 설정하는 속성이다.

 

기본 형식

animation-duration: 지속 시간;

 

예시 코드

div{
    width:100px;
    heigth:100px;
    background-color:red;
    animation-name:bgchange;
    animation-duration:5s;
}

@keyframes bgchange{
    0%{background-color:red;}
    25%{background-color:orange;}
    50%{background-color:yellow;}
    100%{background-color:green:}
}

 

여기서 div 태그는

초기 색상인 빨간색을 시작으로 5초 동안 빨강, 주황, 노랑, 초록으로 변경되고 다시 원래 색깔인 빨강으로 돌아온다.

--

 

 

 

 

animation-delay 속성

 

--

애니메이션 실행을 지연시키는 속성이다.

(속성값으로 초 or 밀리초 단위를 사용)

 

기본 형식

animation-delay: 지연 시간;

 

예시 코드

animation-delay: 3s;

--

 

 

 

 

animation-fill-mode 속성

 

--

애니메이션이 실행되지 전과 후의 스타일을 지정하는 속성이다.

 

기본 형식

animation-fill-mode: 속성값;

 

대부분 애니메이션은 종료된 후에 상태를 유지하는 것을 목적으로 사용하기 때문에
일반적으로 forwards 속성 값을 가장 많이 사용한다.

 

 

예시 코드

div{
    width:100px;
    height:100px;
    background-color:red;
    animation-name:bgchange;
    animation-duration:5s;
    animation-fil-mode:forwards;
}

--

 

 

 

 

animation-iteration-count 속성

 

--

애니메이션은 기본으로 1회 실행 후 종료가 되지만 실행 횟수를 조절할 수 있는 속성이다.

 

기본 형식

animation-iteration-count: 횟수;

 

예시 코드

/* 애니메이션 3회 반복 */
animation-iteration-count:3;

/* 애니메이션 무한 반복 */
animation-iteration-count: infinite;

--

 

 

 

 

animation-play-state 속성

 

--

애니메이션의 재생 상태를 지정하는 속성이다.

일반 전환 효과 속성과는 다르게
애니메이션 속성은 실행 도중에도 일시 정지 or 재실행이 가능하다.
다만, 해당 작업은 순수 HTML과 CSS만으로는 불가능하고 JS까지 같이 사용해야 한다.

 

 

기본 형식

animation-play-state: 속성값;

 

--

 

 

 

 

animation-direction 속성

 

--

애니메이션의 진행 방향을 지정하는 속성이다.

 

기본 형식

animation-direction: 속성값;

 

--

 

 

 

 

animation 속성으로 한 번에 정의하기

 

--

기본 형식

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 

예시 코드

/* bgchange 키 프레임에 정의된 속성을 ease-in 속도로 총 3회 실행 */
animation: bgchange 5s 3 ease-in;

--