HTML/CSS - animation/다단

안녕하세요, HTML/CSS에서 animation 요소와 다단에 대해 정리해 보겠습니다. 애니메이션 때문에 이미지로는 한계가 있어 코드 위주로 정리하겠습니다..

 

◆ animation: 애니메이션이름 지속시간(s) [타이밍 함수 대기시간 반복 획수 반복 방향 전후 상태 재생/정지];

여기서 애니메이션 이름은 @keyframes의 이름입니다. @keyframes는 2개 이상의 애니메이션 중간 상태(프레임)을 지정해 줍니다. @keyframes는 애니메이션의 변화를 설정해주기 때문에 꼭! 정의해 주어야 합니다!

 

@keyframes 양식

@keyframes 애니메이션 이름 {

    0% { 속성: 값; }

    50% { 속성: 값; }

    100% { 속성: 값; }

}

 

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
}

.box:hover {
  animation: my-animation 3s infinite alternate; 
  // 3초동안 지속, infinite를 붙임으로써 애니메이션이 끝나도 반복, alternate-> 100%까지 진행 후 0%까지 반대로 돌아간다
}

@keyframes my-animation {
  0% {
    width: 100px;
    background: tomato;
  }
  70% {
    width: 500px;
    background: dodgerblue;
  }
  100% {
    width: 300px;
    background: yellowgreen;
  }
}
// alternate를 색으로 확인하면 
//tomato(0%) -> dodgerblue(70%) -> yellowgreen (100%) -> dodgerblue(70%) -> tomato(0%) 로 변경됩니다!

 

◆ animation-timing-function : 타이밍 함수를 지정합니다. (linear - 일정한 속도로 변경됩니다)

◆ animation-delay : 애니메이션의 대기 시간 설정합니다.

◆ animation-iteration-count : 애니메이션의 반복 획수를 설정합니다.

◆ animation-direction : 애니메이션의 반복 방향을 설정합니다.

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

 -. reverse : 역방향만 반복

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

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

◆ animation-fill-mode : 애니메이션의 전후 상태(위치)를 설정합니다

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

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

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

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

◆ animation-play-state : 애니메이션의 재생과 정지를 설정합니다.

 -. running : 애니메이션을 동작

 -. paused : 애니메이션을 정지

 

◆ 다단(Multi-Columns) : 일반 블록 레이아웃을 확장해 여러 다단으로 쉽게 정리합니다.

columns : 단의 개수와 단의 넓이를 정의 [ columns: column-width column-count ]

-. column-width : 단의 최적 너비를 설정

-. column-count : 단의 개수를 설정

column-rule : 단을 나누는 선을 정의 [ column-rule: column-rule-width column-rule-color column-rule-color]

-. column-rule-width : 선의 두께

-. column-rule-style : 선의 종류

-. column-rule-color : 선의 색깔

column-gap : column-rule 기준으로 좌우 여백을 설정