[CSS] 동적 효과

Animation : 동적인 변화

• 시간별 animation 작성

  • @keyframes 변수이름 { from(or %) { 스타일; } ... to(or %) { 스타일; } }

• animation 스타일 시트

  • animation-name : 적용할 animation 이름
  • animation-duration : 지속 시간
  • animation-iteration-count : 반복 횟수(infinite-무한)

Transition : CSS 요소의 값이 변하는 순간 1회만 이루어지는 동적 변화 효과

• :hover, :active 등으로 css값이 변할 때 일어나는 동적 효과

• transition : 전환할 요소(ex font-size) 전환시간(ex 5s)

Transform : 회전, 확대 등 기하학적 동적 변화 효과

• 위치 이동

  • translate(x,y), translateX(n), translateY(n)
    : 요소를 x축, y축으로 x, y / n만큼 이동

• 확대/축소

  • scale(w,h), scaleX(n), scaleY(n)
    : 요소의 폭/높이를 w/h/n 배 만큼 조절.

• 회전

  • rotate(angle)
    : 요소를 angle 각도 만큼 시계 방향 회전. 단위 deg(도)

• 기울임

  • skew(x-angle,y-angle), skewX(angle), skewY(angle)
    : 요소를 x축과 y축 기준으로 angle 각도만큼 기울임 변환.