18 Animation & Multi Columns(다단)

1. Animation(애니메이션) 개요 - 단축

• 요소의 애니메이션을 설정/제어

  • animation-name: @keyframes 규칙 의 이름 설정 (기본값: none)

  • animation-duration: 애니메이션 지속 시간 설정(기본값: 0s )

  • animation-timing-function: 타이밍 함수 지정 (기본값: ease)

  • animation-delay: 애니메이션 대기시간 설정 (기본값: 0s)

  • animation-iteration-count: 애니메이션 반복횟수 설정 (기본값: 1)

  • animation-direction: 애니메이션 반복방향 설정(기본값: normal)

  • animation-fill-mode: 애니메이션 전후 상태(위치)설정(기본값: none)

  • animation-play-state: 애니메이션 재생과 정지 설정(기본값: running)

    .box{
      aniation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 전후상태 재생/정지];
      animation: hello 2s linear infinite both;
    }
    @keyframes hello{
      0%{width: 200px;}
      100%{width: 50px;}
    }

1.1 @keyframes-rules

• 2개 이상의 애니메이션 중간 상태 (프레임) 지정

  @keyframes 애니메이션 이름{
    0%{속성: 값;}
    50%{속성: 값;}
    100%{속성: 값;}
  }

  1.2 animation-name

• @keyframes 규칙(애니메이션 프레임)의 이름을 지정

  • none: 애니메이션을 지정하지 않음

  • @keyframes 이름 : 이름이 일치하는 @keyframes 규칙의 에니매 적용

1.3 animation-duration

• 시간: 지속시간을 설정 (기본값: 0s)

1.4 animation-timing-function

• 타이밍 함수(애니메이션 효과를 계산하는 방법) 지정

  • ease: 빠르게-느리게

  • linear: 일정하게

  • ease-in: 느리게-빠르게

  • ease-out : 빠르게-느리게

  • ease-in-out: 느리게-빠르게-느리게

  • cubic-bezier(n,n,n,n)

  • steps(n): n 번 분할된 애니메이션

1.5 animation-delay

음수 허용. 그 값 만큼 애니메이션이 앞서 시작(애니메 주기 도중에 시작)

1.6 animation-iteration-count

• 애니메이션의 반복 횟수를 설정

  • 숫자: 반복횟수 설정 (기본값: 1)

  • infinite : 무한반복

1.7 animation-direction

• 애니메이션의 반복 방향을 설정

  • normal : 정방향만 반복 (기본값)

  • reverse: 역방향만 반복

  • alternate : 정방향에서 역방향으로 반복(왕복)

  • alternate-reverse: 역방향에서 정방향으로(왕복)

1.8 animation-fill-mode

• 애니메이션의 전후 상태(위치)를 설정

  • none: 기존위치에서 시작 => 애니메이션 시작위치로 이동 => 동작 => 기존위치에서 끝

  • forwards: 기존위치에서 시작 => 애니메이션 시작위치로 이동=> 동작=> 애니메이션 끝 위치에서 끝

  • backwards: 애니메이션 시작 위치에서 시작 => 동작=> 기존 위치에서 끝

  • both: 애니메이션 시작 위치에서 시작=> 동작=> 애니메이션 끝 위치에서 끝

1.9-animation-play-state

• 애니메이션의 재생과 정지를 설정

  • runnging: 기본값

  • paused : 애니메이션 정지

2. 다단(Multi Comlumns)

• 일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며 가독성 확보

  • columms: auto(기본값)

    • column-count

      • auto

      • 숫자(단의 갯수 결정)

    • column-width

      • auto

      • px, em, cm등 단위

        각 단이 줄어들 수 있는 최적너비(최소 너비)를 설정하며, 요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 갯수가 조정된다.

  • column-rule(다단 선)

    • column-rule-width

      • 기본값: medium

    • column-rule-style

      • 기본값: none

    • column-rule-color

      • 기본값: 요소의 글자색과 동일

  • column-gap

    • 단과 단 사이의 간격 설정

    • normal: 브라우저가 단과 단 사이의 간격을 설정(1em)

    • 단위 px, em, cm등 단위로 지정