brunch

매거진 CSS 애니메이션

라이킷 28 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 구구 Dec 03. 2016

CSS Animation 속성

CSS 애니메이션과 관련된 속성들은 어떤 것들이 있을까요?

크게 두 가지로 나누자면 애니메이션 관련 속성들과 Transform 속성들이 있습니다.

이번 글에서는 애니메이션 관련 속성들에 대해 써보려고 합니다.

애니메이션 속성

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

애니메이션 관련 속성들은 모두 똑같이 'animation-'로 시작합니다. 이 속성들로 애니메이션의 길이, 가속도, 딜레이, 반복 횟수, 상태들을 조절하죠.

animation-name

이름이 지정되면 해당 이름과 일치하는 키 프레임이 사용됩니다.

animation-name : '애니메이션 이름'

@keyframes '애니메이션 이름'

animation-duration

애니메이션이 지속되는 시간을 정의합니다.

애니메이션을 사용하기 위해선, animation-name과 꼭 함께 필수로 작성해야하는 속성이에요.

aniamtion-timing-function

출처 : https://medium.com/@ryan_brownhill/after-effects-to-css-79225c1d767e#.i9qiq0ou4

애니메이션의 속도 곡선을 지정하는 속성입니다.

어떻게 지정하느냐에 따라 애니메이션이 부드러워질 수도 있고, 통통 튀는 애니메이션이 될 수 있습니다.

ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps(4, end), cubic-bezier를 쓸 수 있으며 제가 주로 다룰 것은 cubic-bezier입니다.

다른 속성들과 다르게 사용자가 곡선을 컨트롤 할 수 있기 때문에 주로 사용하게 될거에요.

그리고 AfterEffects를 아시는 분이 있다면 훨씬 이해하기 쉬울 겁니다.

출처 : https://medium.com/@ryan_brownhill/after-effects-to-css-79225c1d767e#.i9qiq0ou4

바로 이 곡선과 똑같은 역할을 하는 CSS 애니메이션 속성이랍니다. 아마 보신 분들도 있을 거예요.

좋은 애니메이션을 만들기 위해선 이 곡선들을 자유자재로 다룰 수 있어야 합니다.

cubic-bezier 곡선은 http://cubic-bezier.com/ 에서 쉽게 값을 가져올 수 있답니다.

어떤 이점을 가지는지, 응용하는 방법에 대해선 따로 다뤄볼 예정입니다.

animation-delay

애니메이션을 시작하기 전에 기다려야하는 시간을 정의합니다. 애니메이션은 첫 번째 반복에서만 지연됩니다.

값은 양수뿐만 아니라 음수까지 입력할 수 있습니다. animation-delay: -1000ms; 처럼요.

animation-iteration-count

애니메이션이 재생 될 횟수를 정의합니다.

양의 정수와 infinite만 입력할 수 있습니다. infinite는 계속 반복 재생돼요.

animation-direction

애니메이션이 재생되는 방향을 정하는 속성입니다.

normal, reverse, alternate, alternate-reverse가 있는데 주로 사용하는 것은 alternate입니다.

무한 반복되는 애니메이션을 만들 때 쓰게 될 거예요. 값이 지정되지 않은 normal일 때에는 애니메이션이 끝나고 다시 처음으로 돌아갈 때 부자연스럽게 보입니다.

animation-fill-mode

아마 대부분의 사람들이 animation-fill-mode가 어떻게 다른지 헷갈릴 겁니다.

애니메이션이 끝난 후 처음으로 돌아가느냐, 계속 유지되느냐로만 알고 계실 수도 있어요.

animation-fill-mode는 none, forwards, backwards, both가 있습니다.

none : 아무것도 지정되지 않은 상태입니다.
forwards : 애니메이션이 키프레임의 100%에 도달했을 때 마지막 키프레임을 유지합니다.
backwards : 애니메이션의 스타일을 애니메이션이 실제로 시작되기 전에 미리 적용합니다.
both : forwards, backwards를 둘 다 적용합니다.

GIF 예제의 원래 버튼 색은 주황색이에요. 키프레임에서는 연보라색에서 보라색으로 변하도록 지정해놓았죠.

그 결과로 none, forwards에서는 원래의 색인 주황색으로 보이는 반면, backwards와 both에선 연보라색으로 보입니다.

none에 대해 설명을 덧붙이자면 애니메이션 스타일은 기본 스타일에 영향을 미치지 않습니다. 요소는 애니메이션이 시작되기 전에 기본 스타일로 설정되고, 애니메이션이 끝난 후 기본 스타일로 돌아갑니다.

애니메이션 스타일은 @keyframes {} 안에서 지정된 스타일을 뜻해요.

animation-fill-mode의 속성 값들의 차이를 확실하게 보시려면 animation-delay의 값이 있는 상태에서 보셔야 합니다. animation-play-state의 값을 'paused'로 주시면 더 좋아요.

animation-play-state

값으로 running과 paused를 쓸 수 있는데, running이 기본 상태입니다.

기본 상태 일 때, 애니메이션 지속시간과 애니메이션 이름이 정의되면 자동으로 재생되기 시작하죠.

paused는 첫 번째 키 프레임에서 애니메이션을 일시중지 시키는 값입니다.

애니메이션이 일시중지 된 경우 적용되는 스타일은 기본 스타일이 아닌 첫 번째 키프레임의 스타일입니다.

background-color: 주황색;
animation-name: change-color;
animation-duration: 1s;
animation-play-state: paused;

@keyframes change-color {
      from {
            background-color: 연보라색;
      }
      to {
            background-color: 보라색;
      }
}

위 예제에선 연보라색으로 보이게 됩니다. paused 일 때, 첫 번째 키프레임의 스타일이 지정된다는걸 꼭 명심하세요.

출처 : http://codepen.io/SeongJ1n/details/rrGRyA/

.star {
      animation-name: star-scale;
      animation-delay: 0.1s;
      animation-duration: 0.85s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      animation-timing-function: cubic-bezier(0.5, 0, 0, 0.8);
}

@keyframes star-scale {
      from, 15% { transform: scale(0); }
      40% { transform: scale(0.95); }
      70% {
            animation-timing-function: cubic-bezier(0.215, 0.6, 0.355, 1);
            transform: scale(0.75);
      }
      to {
            transform: scale(0.85);
      }
}