[css] CSS Animation - Basic

1. 단순한 애니메이션(hover)은 transition 사용

[ MDN. CSS 트렌지션 참고 ]

• 🔆 transition: {property} {duration} + {Event}

# html
<button>Click!</button>

# css
<style>
  button {
    padding: 1rem;
    font-size: 2rem;
    color: white;
    background: pink;
    transition: padding 2s;
  }
  button:hover {
    padding: 2rem;
  }
</style>

transition만의 속성들:

• transform: ... 단축 속성(축약형)으로도 사용 가능
• transform-origin: numX, numY;
• duration: step-end, steps(num)

2. 키프레임 애니메이션

[ MDN. CSS 애니메이션 참고 ]

• 🔆 animation: {name} {duration} + @keyframes {name} {...}
• 🌈 animation: name duration timing-function delay iteration-count direction fill-mode;

# html
<div>
  <button>Click!</button>
</div>

# css
<style>
  button {
    padding: 1rem;
    font-size: 2rem;
    color: white;
    background: pink;
    transition: padding 2s ease-in-out;
  }
  button:hover {
    padding: 2rem;
  }
</style>

🍕 키프레임을 이용해서 Ball Bounce 애니메이션을 만들어 볼까요?

2-1. 애니메이션 타임라인 컨트롤하기 - @keyframs name {...}

• 키프레임의 타임라인은 %로 조정 가능할 수 있다.
• from 은 0%, to 는 100%를 나타낸다.

  @keyframes bounce {
    60%, 80%, to { transform: translateY(350px); }
    70% { transform: translateY(250px); }
    90% { transform: translateY(300px); }
  }

2-2. 애니메이션 가속도 컨트롤하기 - ease-in-out

• 전체 애니메이션(default) 스피드 그래프는 animation: 속성에서 지정.
• 각각의 키프레임 포인트의 속도 조절은 @keyframes속성에서 지정 가능하다.

  .ball {
    animation: bounce 1s ease-in forwards;
  }
  @keyframes bounce {
    60%, 80%, to { 
      transform: translateY(350px);
      animation-timing-function: ease-out;
    }
    70% { transform: translateY(250px); }
    90% { transform: translateY(300px); }
  }

3. Timing-Function (speed graph)

Google 개발자 툴에서 animation속성을 찾아서 📈그래프 아이콘을 클릭!!!

• ease-in:
• ease-out:
• ease-in-out:
• cubic-bazier( x1, y1, x2, y2 )

• animation: name duration timing-function delay iteration-count direction fill-mode;
  duration: s, ms
  timing-function: ease-in-out, ease-in, eae-out
  delay: s,ms, -s, -ms
  iteration-count: {num}, infinite
  direction: normal, reverse, alternate, alternate-reverse

4. Cover Background Image Zooom

background-size: 120%; 대신 transform: scale(120%); 를 사용하면 해결!!!