CSS 애니메이션_2

CSS 애니메이션2

CSS 애니메이션 가속도 함수의 이해

linear, ease 가 가장 많이 사용되고, 나머지 속도 함수들은 사용 빈도가 많이 낮다.

 

linear : 일정한 속도로 애니메이션 재생 - 가속도 없이 일정하게 움직이는 애니메이션

ease : 기본 값, 애니메이션이 느리게 시작했다 빨라지고, 다시 느리게 끝남.
시작 부분에서는 더 짧은 시간에 빨라지며, 끝나는 부분에서는 더 긴 시간 동안 느려짐. - 점점 빨라졋다 서서히 멈추는 애니메이션을 원하면 ease

ease-in : 애니메이션이 느리게 시작함.

ease-out : 애니메이션이 느리게 끝남.

ease-in-out : 애니메이션이 느리게 시작했다 빨라지고 마지막에는 느리게 끝남.
시작과 끝나는 부분의 속도 증가/감소가 대칭임.

step-start : steps(1, start)와 같다. 애니메이션 마지막 프레임으로 이동.

step-end : steps(1, end)와 같다. 애니메이션 첫 프레임으로 이동.

steps(양의정수[,start end])
애니메이션이 매끄럽게 진행하기 보다,
단계별로 갑작스럽게 변화하는 효과를 구현할 수 있다.

양의 정수 - 애니메이션을 몇 단계로 나눌지 지정한다.
start - 각 단계의 시작 부분에서 변화가 발생한다.( 일반적으로 우리가 생각하는 것보다 빠르게 동작.)
end - 각 단계의 끝 부분에서 변화가 발생한다.( 일반적으로 우리가 생각하는 것처럼 동작)

See the Pen StepsExample by JHKIMS (@jhkims) on CodePen.

 

 

cubic-bezier(x1,y1,x2,y2)
제어점 위치를 표시하는 파라미터 4개의 숫자를 입력해서 베지어 곡선을 직접 그리는 방식으로 재생 속도를 제어할 수 있다.

베지어 곡선은 2개의 제어점 사이를 통과하는 곡선을 생성한다.

애니메이션 채우기 모드(animation-fill-mode)의 이해

animation-fill-mode 속성은 애니메이션 시작 전(지연 시간 포함), 또는 애니메이션 종료 후의 요소에 적용하는 CSS 스타일을 지정한다.

CSS 애니메이션 요소에 적용되는 CSS는 애니메이션 시작 전(지연시간 포함),
애니메이션 동작 중, 애니메이션 종료 후로 구분할 수 있으며,
각각 적용되는 CSS 스타일이 다를 수 있다.

채우기 모드 속성 값을 선택하는데 따라서 요소의 시작 색상이 기본 색상이 회색일 수도 있고,
애니메이션 시작 색상인 핑크색일 수도 있다.
그리고 변형 애니메이션 완료 후에 변형 전 상태로 돌아갈 수도,
애니메이션 마지막 프레임 상태로 유지가 될 수도 있다.

none(기본값)
애니메이션 중이 아닌 경우, 애니메이션 전 요소의 CSS 스타일을 유지함.

forwards
애니메이션 중이 아닌 경우, 애니메이션 마지막 키프레임의 CSS 스타일을 유지함.

backwards
애니메이션 중이 아닌 경우, 첫 번째 애니메이션 키프레임의 CSS 스타일을 유지함.

both
애니메이션 시작 전에는 첫 번째 애니메이션 키프레임을 유지하며,
종료 후에는 마지막 키프레임 애니메이션의 CSS 스타일을 유지한다.
none과는 다르다.

다중 애니메이션 적용하기

다중 애니메이션 적용시 주의점
두 개 이상의 키프레임 애니메이션을 조합해서 사용하는 경우
같은 속성을 중복 적용해서 사용하면 예상치 못한 애니메이션 동작을 만들게 될 수 있다.

다음 코드처럼 2개의 키프레임 애니메이션을 동시에 적용하면, 애니메이션이 엉뚱한 위치로 튀는 현상이 생긴다.

@keyframes rotate{
    to{
        background-color: lightblue;
        transform: translate(100px, 100px) rotate(360deg);
        }
}
@keyframes scale{
    to{
        background-color: black;
        transform: scale(1.5);
        }
}

animation: rotate 2s linear, scale 2s linear 1s;

→ 애니메이션 사이를 연결해주는 속성인 '채우기 모드' 속성을 사용해서 키프레임 애니메이션의 마지막 위치가 유지되도록 animation-fill-mode 속성 값을 추가해 다음과 같이 작성해준다.

animation: rotate 2s linear forwards, scale 2s linear 1s forwards;

→ 애니메이션이 부드럽게 연결되면서 마지막 애니메이션 프레임도 자연스럽게 마무리되는 애니메이션이 완성.

같은 속성이 중복되지 않도록 키프레임 애니메이션을 분할하거나, 시간 지연을 이용해 순차적으로 실행되도록 애니메이션을 작성하는 것이 좋다.

2개 이상의 키프레임 애니메이션을 조합할 때는
애니메이션 간의 관계를 고려해서 속성 값을 작성해야 완성도 높은 애니메이션을 만들 수 있다.

steps() 애니메이션 함수의 이해

애니메이션이 계단식(step)으로 단계별로 진행되도록 하는 속도 함수.
속도 함수는 2개의 파라미터를 가지고 있다.

1번째 - 몇 개의 스텝으로 나눌지를 정하는 양의 정수 값을 사용.
2번째 - start, end 두개 중 한개의 값을 사용.

다음 코드를 보면 1(파란색 상자), 2번(빨간색 상자)는 동일하게 .container클래스 안에 있다.
그런데 steps의 속성에 따라서 서로 다르게 움직이는 걸 확인할 수 있다.

See the Pen StepsAnimation by JHKIMS (@jhkims) on CodePen.

 

 

start/end 옵션은 animation-fill-mode 속성이 'none'이 아닌 경우 적용되지 않으므로
animation-fill-mode을 사용하는 경우 steps() 애니메이션은 사용할 필요가 없다.

변수를 활용해 CSS 애니메이션 만들기

CSS 변수를 잘 활용하면 반복해서 정의해야 하는 애니메이션 작업을 작은 CSS 코드로 줄일 수 있다.

키프레임 애니메이션 안에서도 CSS 변수를 사용할 수 있기 때문에
여러 개의 유사한 키프레임 애니메이션을 만들지 않고 한 개의 애니메이션 정의를 재활용 할 수 있다.

하트가 커지는 정도를 설정하는 "--size" CSS 변수를 하나 만들어서 ".box" 클래스에 적용 후,
키프레임 애니메이션의 "scale()" 함수에 이 변수를 적용.

/* --size 변수 기본값 정의*/
.box{
    left: 100px;
    top: 100px;
    --size: 2.5;
}
@keyframes heartbeat {
    to{
        transform: scale(var(--size)); /*  --size 변수로 변형 크기 조절. */
        opacity: 0
    }
}

See the Pen 5Hart by JHKIMS (@jhkims) on CodePen.

 

출처: HTML&CSS 마스터북