css 애니메이션 과 다단

animation: 요소에 애니메이션 효과를 제어한다.  이때 애니메이션 이름과 지속시간은 필수적으로 명시해야 한다.

@keyframes : animation-name과 연결하여 어떻게 animation이 동작할지 실질적인 내용을 명시한다 
@keyframes 사용예시) 

<style>
  .box1{
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .box1:hover{
    animation: keyFramesName 3s; /* keyframes의 이름과 animation-name을 연결하고 지속시간을 명시한코드 */
  }
@keyframes keyFramesName{
  0%{width: 100px;}       /* 애니메이션이 동작할때 첫부분의 크기를 설정한 코드  */
  100%{width:200px;} /* 애니메이션이 동작할때 끝부분에 크기를 설정한 코드 */
  0%{background-color:blue;}  /* 애니메이션이 동작할때 첫부분의 배경색을 파란색 으로 시작하는 코드 */
  100%{background-color: black;} /* 애니메이션이 동작할때 끝부분의 배경색을 검정색으로 끝내는코드 */
}
</style>
<div class="box1"></div>

keyframes는 주로 단계별로 어떤 효과를 사용할지 %를 이용해 나타낼 수 있는데 이때 0%는 시작 지점 100%는 끝 지점 중간에 50%를 명시해서 중간지점을 만들 수 있고
세부적으로 25%, 30%,75% 등등으로 원하는 단계에 애니메이션 효과를 다르게 부여 할 수 있다.

animation-name: @keyframes에 이름을 명시함으로써 animation-name속성을 가진 요소에 @keyframes에 동작 내용과 다른 animation효과를 해당 요소에 부여한다
 
animation-duration : 애니메이션 지속 시간을 설정한다
기본값:0
속성값: 숫자를 사용하여 지속 시간을 설정한다 ex) animation-duration:3s;

animation-delay : 애니메이션 대기 시간을 설정한다.
기본값: 0
속성값: 숫자를 사용하여 대기 시간을 설정한다 ex) animation-delay:2s;

animation-timing-function : 애니메이션의 타이밍 함수를 설정한다.
기본값 :ease
속성값: transition과 동일하다. 블로그 transition 파트 참조
타이밍 함수란? : 애니메이션이 동작할 때 동작 시작과 끝의 속도를 설정하는 것을 의미함

animation-iteration-count: 애니메이션의 반복 횟수를 설정한다.
기본값 : 1
속성값: 숫자를 사용하여 반복 횟수를 설정한다 이때 숫자가 아닌 infinite라고 명시하면 무한 반복한다 ex) animation-iteration-count:4;

animation-direction: 애니메이션이 동작할 방향을 설정한다.
기본값: nomal
속성 값: 
normal: 애니메이션의 동작 방향이 정방향이다
reverse: 애니메이션의 동작 방향이 역방향이다
alternate: 애니메이션의 동작 방향이 정방향에서 역방향으로 왕복한다 이때 왕복이란 개념 때문에 돌아올 때도 반복 횟수가 포함되기 때문에 animation-iteration-count의 속성 값이 1일 때는 동작하지 않는다.
alternate-reverse: 애니메이션의 동작 방향이 역방향에서 정방향으로 왕복한다 이때 왕복이란 개념때문에 돌아올 때도 반복 횟수가 포함되기 때문에 animation-iteration-count의 속성 값이 1일 때는 동작하지 않는다.
ex)

<style>
div{
  width: 100px;
  height: 100px;
  margin: 150px;
  border-radius: 10px;
}
.box1{
  background-color: red;
  animation-name: rainbowMoveBox;     /* keyframes의 애니메이션 동작 효과를 animation-name을 이용해 연결  */
  animation-duration: 8s;   /* animation의 동작시간을 6초로 설정 */
  animation-delay:2s;      /* animation의 동작 지연시간을 2초로 설정 */
  animation-timing-function: linear;  /* animation이 동작하는 속도를 일정하게 설정 */
  animation-iteration-count: 6;     /* animation의 동작반복횟수를 6회로 설정  */
  animation-direction: alternate;   /* animation이 동작할때 방향을 설정 (왕복) */
}
.box2{
  background-color: black;
  animation: rainbowMoveBox 8s linear 2s 6 alternate; 
  /* box1의 animation속성과 속성값을 한번에 명시한 단축속성 작성 순서는 상관없지만  초단위(s)가 붙어있는 duration과 delay는 먼저 명시한 부분을 duration 뒤에 명시한 부분을 delay로 해석하는 점을 주의하자 */
}

@keyframes rainbowMoveBox{
  0%{
    background-color:yellow;
    transform: translate(0,0);
  }
  25%{
    background-color: green;
    transform: translate(100px,0);
  }
  50%{
    background-color: blue;
    transform:translate(100px,100px) ;
  }
  75%{
    background-color: blueviolet;
    transform:translate(0,100px);
  }
  100%{
    background-color: brown;
    transform: translate(0,0);
  }
}
</style>
<div class="box1">animation개별속성 사용</div>
<div class="box2">animation단축속성 사용</div>

multi-columns(다단): 텍스트를 다단으로 정리하여 가독성을 확보하는 기능이있다.
columns: column-count와 column-width를 한번에 작성하는 단축 속성이다.
column-count: 몇개의 다단을 생성할지 설정한다.
column-width: 각각의 다단의 가로나비를 설정한다.

column-rule:column-rule-style, width, color를 한 번에 작성하는 단축 속성이다
column-rule-style: 다단의 선 종류를 설정한다.
column-rule-width: 다단의 선 두깨를 설정한다
column-rule-color: 다단의 선 색깔을 설정한다

column-gap: 단과 단사이의 간격을 설정한다.

ex)

<style>
.textbox1{
  column-width: 100px;    /* 단의 가로너비를 설정 */
  column-count: 3;    /* 단의갯수 설정 */
  
  column-rule-style: solid;   /* 단의 선 종류를 설정 */
  column-rule-color: red; /* 단의 선 색깔을 설정 */
  column-rule-width: 5px;  /* 단의 두깨를 설정 */
  
  column-gap: 5em;    /* 단과 단사이 간격 설정 px로도 설정하능하지만 주로 em단위로 설정한다  */
  margin-bottom: 50px;
}
.textbox2{
  columns: 3 100px;     /* column-width,count를 한번에 작성하는 단축속성  */
  column-rule: 5px solid black;  /* column-rule-color,style,width를 한번에 작성하는 단축속성 */
  column-gap: 5em;    /* 단과 단사이 간격 설정 주로 em단위 사용 */
}
</style>

<p class="textbox1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Vel deserunt distinctio deleniti optio ea repudiandae, mollitia voluptas?
Natus officiis molestias pariatur obcaecati mollitia vel, possimus unde in animi,
iste laboriosam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio,
provident ratione dolorum molestiae error ut cum. Facere, consequatur tempore.
Aspernatur officia quia ea, consectetur omnis molestias earum tempora labore totam!
</p>


<p class="textbox2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Distinctio, in voluptates facere laudantium quas est nostrum delectus nulla rem, 
aut earum. Eum quae tenetur explicabo asperiores delectus, dignissimos eos ex. 
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores animi nisi minima odit labore magni officiis fugiat nam, accusamus ducimus
tempora, architecto repudiandae quis obcaecati. Deleniti, ullam! Accusantium, sunt fugiat.
</p>