transtion 과 animation

transtion 과 animation 효과를 사용하면 일정 시간에 걸쳐 속성값을 부드럽게 변화시킬 수 있는데 이것을 제어하는 것을 가능하게 해주는 효과이다.

1. transition

1-1 특징

• 트랜지션은 스스로 작동되지 않는다
  (1. html의 가상클래스를 이용한 :hover , :active | 2. 자바스크립트를 사용하여 동적으로 만든다.)
• 요소의 변화를 일정기간 동안만 일어나게 한다.

1-2 사용법

transitioin: property | duration | timing-funtion | delay

• property : font-size , color , background-color 등 요소에 효과를 줄 css 속성들을 적을 수 있다.
• duration : transition 을 얼마동안 지속시킬 것인지에 대한 속성값이며 단위로는 1ms , 1s 가 있다. (참고 1000ms === 1s)
• timing-function : 변화가 일어났을 때 속도를 지정해주는 값으로 6가지 종류가 있다.

  linear (일정한 속도) | ease (기본값, ease-in-out과 동일)ease-in (시작부분을 천천히) | ease-out(끝부분을 천천히) | ease-in-out (시작부분을 천천히 중간 빠르게 끝부분을 천천히) | cubic-bezier() (자신이 원하는 스타일 transition)

• delay : 트랜지션 효과를 시간을 두고 실행하게 하려 할 때 사용하는 값이다.

1-3 섬세하게 제어하는 법

.a {
transition: font-size 1000ms ease-in-out,
background-color 2000ms cubic-bezier(0.08, 0.57, 0.97, -0.78);
}

속성값들을 쓰고 끝에 콤마(,)를 붙여준 후 다시 원하는 트랜지션 효과를 적고 마무리해주면 2개의 트랜지션 효과가 동시에 일어난다.

2. animation

2-1 특징

• CSS 스타일을 다른 CSS 스타일로 변경이 전환된다.
• @keyframe 들로 이루어져 있다.

2-2 사용법

<1번째 방법>
@keyframes name {
  from {
    /* Rules */
  }
  to {
    /* Rules */
  }
}


<2번째 방법>
@keyframes name {
  100% {
    /* Rules */
  }

  50% {
    /* Rules */
  }

  0% {
    /* Rules */
  }
}

• name : @keyframes를 작동시킬 이름이 되는 부분을 나타낸다. 이름 작성시 원하는 이름으로 작성해도 된다.
• 1번째 방법 : from-to from에 시작할 효과를 넣고 to에 마지막 효과를 넣어준다.
• 2번째 방법 : 애니메이션이 100% , 50% , 0% 순으로 효과를 넣을 수 있고 퍼센트 사이사이에 수치를 넣어 더 섬세하게 조절할 수 있다.
• @keyframes 작성 완료후 적용하고자 하는 요소 클래스에 속성,속성값을 적용해야하는데 자주 사용하는 속성들이 있다.

animation-name : 적용시킬 @keyframes name
animation-duration : animation 지속시간
animation-timing-function : 위의 transtion 참고
animation-delay : 지연시간
animation-iteration-count : 몇번 반복할 것인지 infinity(무한가능)
animation-direction : 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정

🚨주의점 : 요소 클래스의 기본값 (색상,속성 등)이 없어지면 애니메이션 끝난 후 없어진다.