[기본 개념] 5 | (5.2) 트랜지션, 애니메이션

[기본 개념] 5 | (5.2) 트랜지션, 애니메이션

1 변형

2> 트렌지션

3> 애니메이션

2 트렌지션

트렌지션과 속성

 

 트랜지션은 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 말한다. 

 

종류	설명
transition-property	트랜지션의 대상을 지정
transition-duration	트랜지션을 실행할 시간 지정
transition-timing-funcion	트랜지션의 실행 형태를 지정
transition-delay	트랜지션의 지연 시간 지정
transition	위 속성을 한꺼번에 지정

 

트랜지션의 대상을 지정하는 transition-property 속성

 

기본형

transition-property : all | none | <속성 이름>

 

all all 값을 사용하거나 transition-property 를 생략할 경우 요소의 모든 속성이 트랜지션 대상 (기본값)

none 트랜지션을 하는 동안 아무 속성도 바뀌지 않음

<속성이름> 트랜지션 효과를 적용할 속성을 지정

 

 맨 먼저 transition-property 속성을 사용하여 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정해야 한다.

 

트랜지션의 진행시간을 지정하는 transition-duration 속성

 

기본형

transition-duration : <시간>

 

 transition-duration 속성으로 진행시간을 지정할 수 있다. 시간단위는 초 또는 밀리초이며, 음수값을 지정하면 0으로 간주한다.

 

(ex. 트랜지션 대상과 진행시간 지정하기)

 

...
  .box {
  ...
    transition-property : width, height;	// 트랜지션 대상 - 너비, 높이
    transition-duration : 2s, 1s;		// 트랜지션 대상 - 2초, 1초
  }
  .box:hover {
    width : 200px;
    height : 120px;
  }
</style>
...

 

트랜지션의 속도 곡선을 지정하는 transition-timing-function 속성

 

기본형

transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

 

ease 처음에는 천천히 시작 후 빨라지다가 마지막에는 천천히 끝남 (기본값)

linear 시작부터 끝까지 똑같은 속도로 진행

ease-in 느리게 시작

ease-out 느리게 끝남

ease-in-out 느리게 시작하고 느리게 끝남

cubic-bezier(n, n, n, n) 배지에 함수를 정의 (n값은 0~1 사이만 사용)

 

 transition-timing-fuction 속성을 사용하여 시작, 중간, 끝에서의 속도를 지정하여 전체 속도 곡선을 만들 수 있다.

 

트랜지션의 지연시간을 설정하는 transition-delay 속성

 

기본형

transition-delay : <시간>

 

 transition-delay 속성을 사용하여 지정된 시간만큼 기다렸다가 시작한다. 시간 단위는 초 또는 밀리초이며, 기본값은 0이다.

 

트랜지션의 속성을 한꺼번에 표기하는 transition 속성

 

기본형

transition : <transition-property값> | <transition-duration값> | <transition-timing-function값> |<transition-delay값>

 

 속성값을 작성하는 순서는 상관없지만 시간값을 사용하는 속성은 앞에 오는 시간값을 transition-duration 속성으로, 뒤에 오는 시간값을 transition-delay 속성으로 간주한다.

3 애니메이션

CSS 애니메이션에서 사용하는 속성

 

 animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다. 키프레임은 @keyframes 속성으로 정의한다.

 

종류	설명
@keyframes	애니메이션이 바뀌는 지점을 설정
animation-delay	애니메이션의 시작 시간을 지정
animation-direction	애니메이션을 종료한 뒤 순방향으로 진행할지, 역방향으로 진행할지 지정
animation-duration	애니메이션의 실행시간을 지정
animation-iteration-count	애니메이션의 반복횟수를 지정
animation-name	@keyframes로 설정해놓은 중간 상태를 지정
animation-timing-function	키프레임의 전환형태를 지정
animation	animation 속성을 한꺼번에 묶어서 지정

 

애니메이션의 지점을 설정하는 @keyframes 속성

 

기본형

@keyframes  <이름>  {

    <선택자> {  <스타일>  }

}

 

 애니메이션의 상태가 바뀌는 부분이 있다면 @keyframes 속성을 이용하여 바뀌는 지점을 설정한다.

 

 중간 지점을 추가하려면 시작위치 0%, 끝위치를 100%로 놓고 설정해도 되고, from과 to 키워드를 사용해도 된다. 

 

애니메이션의 이름을 설정하는 animation-name 속성

 

기본형

animation-name : <키프레임 이름> | none

 

 animation-name 속성으로 이름을 사용해 애니메이션을 구분한다.

 

애니메이션의 실행시간을 지정하는 animation-duration 속성

 

기본형

animation-duration : <시간>

 

 animation-duration 속성은 얼마동안 재생할 것인지 설정한다. 시간 단위는 초 또는 밀리초이며, 기본값은 0이므로 속성값을 지정하지 않으면 애니메이션이 실행되지 않는다.

 

(ex. 애니메이션의 지점, 이름, 실행시간 적용하기)

 

...
  #box1 {
    background-color : #4cff00;		// 연두색 박스
    border : 1px solid transparent;	// 1px짜리 투명 테두리
    animation-name : shape;		// 애니메이션 지정
    animation-duration : 3s;		// 애니메이션 실행시간
  }
  #box2 {
    background-color : #8f06b0;		// 보라색 박스
    border : 1px solid transparent;	// 1px짜리 투명 테두리
    animation-name : rotate;		// 애니메이션 지정
    animation-duration : 3s		// 애니메이션 실행시간
  }
  @keyframes shape {
    from { border : 1px solid transparent; }	// 1px짜리 투명 테두리에서
    to {
      border : 1px solid #000		// 검은색 테두리로 변경
      border-radius : 50%		// 테두리를 둥글게 변경
    }
  }
  @keyframes rotate {
    from { transform : rotate(0deg); }	// 0도에서 시작해서
    to { transform : rotate(45deg); }	// 45도까지 회전하기
  }
</style>
...
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

 

애니메이션의 방향을 지정하는 animation-direction 속성

 

기본형

animation-direction : normal | reverse | alternate | alternate-reverse

 

normal 애니메이션을 from에서 to로 진행 (기본값)

reverse 애니메이션을 to에서 from으로, 원래 방향과는 반대로 진행

alternate 홀수 번째는 nomal로, 짝수 번째는 reverse로 진행

alternate-reverse 홀수 번째는 reverse로, 짝수 번째는 normal로 진행

 

 기본적으로 from 에서 to 순서로 진행하는데 animation-direction 속성을 사용하여서 진행방향을 바꿀 수 있다.

 

애니메이션의 반복횟수를 지정하는 animation-iteration-count 속성

 

기본형

animation-iteration-count : <숫자> | infinite

 

<숫자> 애니메이션의 반복횟수를 지정

infinite 애니메이션을 무한반복

 

 상황에 따라 애니메이션을 반복해서 보여줘야 할 때는 animation-iteration-count 속성을 사용하여 반복횟수를 정한다.

 

애니메이션의 속도 곡선을 지정하는 animation-timing-function 속성

 

기본형

animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

 

 animation-timing-function 속성을 사용하여 애니메이션의 시작, 중간, 끝에서 속도를 지정할 수 있다.

 

애니메이션의 속성을 한꺼번에 표기하는 animation 속성

 

기본형

animation : <animation-name> | <animation-duration> | <animation-timing-function> | <animation-delay> | <animation-iteration-count> | <animation-direction>

 

 animation 관련 속성을 한꺼번에 표기할 수 있다.

 

animation-duration 속성을 지정하지 않으면

기본값 0으로 적용되어 애니메이션 효과가 보이지 않으므로 반드시 표기해야 한다.

 

(ex. 애니메이션 2개를 한꺼번에 지정하기)

 

...
  .box {
    width : 100px;
    height : 100px;
    margin : 60px auto;
    animation : rotate 1.5s infinite, background 1.5s infinite alternate;
    // rotate 애니메이션 정의, 1.5초, 무한 & background 애니메이션 정의, 1.5초, 무한
  }
  @keyframes rotate {	// 0도 -> x축 -180도 회전 -> y축 -180도 회전
    from { transform : perspective(120px) rotateX(0deg) rotateY(0deg); }
    50% { transform : perspective(120px) rotateX(-180deg) rotateY(0deg); }
    to { transform : perspective(120px) rotateX(-180deg) rotateY(-100deg); }
  }
  @keyframes background {	// 빨강 -> 초록 -> 파랑
    from { background-color : red; }
    50% { background-color : green; }
    to {background-color : blue; }
  }
</style>
...

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)