9.Transition & Animation

1. Transition

• Transition : CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.

  • property : 변화가 일어날 속성에 대해서 적어줌

  • duration : 변화가 일어나는 시간

    • 단위 : ms , s(1초)

  • [timing-function] : 변화가 일어날때 변화의 속도

    • ease-in : 처음에는 천천히 나중에 확 바뀜

    • ease-out : 처음에는 빨리 바뀌다가 나중에 천천히

    • ease-in-out : 빨리 빨리 바뀜

    • cubic-bezier() : 내가 속도의 변화를 들수 있음, cutomize할수 잇게함

  • [delay] : transition이 몇초 후에 일어날수 있게끔

• 예시

  .box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000ff;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform
        2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
  }
  .box:hover {
    background-color: #ffcccc;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  

  즉 이 부분에서 CSS가 실행될때 transition은 시작되지 않다고 .hover가 발생했을때 box의 transition이 동작한다.

---

꿀 팁

selectior {
  transition: all 2500ms;
}
<!--transition: all 은 모든 속성에서 변화가 일어남, font-size나 배경이 서서히
    변한다거나 -->;

• cubic-bezier 할수 있는 사이트

cubic-bezier

---

2. Animation

• 1.animation vs transition

  • animaition : 좀 더 자유도가 높고, 전환보다도 더 특별한 애니메이션을 줄때 사용

  • transition : 전환하면서 부드럽게 바뀔때 사용

• 2.animation : animation의 시작은 @keyframes 를 주면서 시작한다.

@keyframes move-box {
  from {
    /* 변화해야하는 속성 */
  }
  to {
    /* 변화해야하는 속성 */
  }
}

• 3.animation의 속성

  • animation-name : keyframes에 적었던 이름

    animation-name: move-box;
    

  • animation-duration : 애니메이션의 지속시간

    • duration 단위

      • ms

      • s

  • animation-timing-function

    • ease-in

    • ease-out

    • ease-in-out

    • cubic-bezier()

  • animation-delay : delay 후에 애니메이션 동작

    • ms

    • s

  • animation-interation-count : 애니메이션이 몇번 작동하는지 정해줌

    • animaition-interation-count : 정수(수만큼 반복)

    • animaition-interation-count : infinite(무한 반복)

  • animation-direction

    • animation-direction : : alternate (번갈아 간다) , animation-interation-count와 같이 쓰임

---

꿀 팁

1. animation keyframes을 줄때 from-to 말고도 %를 사용해서도 적용이 가능하다.

@keyframes name {
  0% {
  }
  30% {
  }
  60% {
  }
  90% {
  }
}

1. 변화할때 초기값을 주어야 한다.

.box {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #0066ff;
  /* 초기값 ,  #0066ff 파란색 */
  animation-name: move-box;
  animation-duration: 2000ms;
}

@keyframes move-box {
  from {
    top: 0;
    background-color: #0066ff;
    /* #0066ff는 파란색 */
  }
  to {
    top: 200px;
    background-color: #ff4949;
    /* #ff4949 */
  }
}

만약 초기값인 background-color를 변화시키기 위해 초기값을 주지 않았다면 파란색이었다가 -> 빨간색이었다가 -> 색을 주지 않음(why? 초기값이 지정이 안되있으니까 초기값이 없는 css가 적용되므로)

---

3. Micro Interaction