[CSS] 애니메이션 & 다단

 

animation(애니메이션) : 요소에 애니메이션을 설정/제어

애니메이션을 직접 만들어주는 속성이 아니라 @keyframes 규칙에 설정된 애니메이션의 정의를 설정/제어. 단축속성. 

*단축속성 작성 시 duration delay 순으로 입력해야함

 

값	의미	기본값
animation-name	@keyframes 규칙의 이름을 지정	none
animation-duration	애니메이션의 지속시간 설정	0s
animation-timing-function	타이밍 함수 지정	ease
animation-delay	애니메이션의 대기 시간 설정 *음수사용가능	0s
animation-iteration-count	애니메이션의 반복 획수 설정	1
animation-direction	애니메이션의 반복 방향 설정	normal
animation-fill-mod	애니메이션의 전후 상태(위치) 설정	none
animation-play-state	애니메이션의 재생과 정지 설정	running

 

 

사용법

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

 

 

예제

<div class="box"></div>

.box{
  width: 100px;
  height: 100px;
  background: tomato;
}
.box:hover{
  animation: first-animation 2s infinite
    alternate;
}

@keyframes first-animation{
  0% {
    width: 100px;
  }
  100%{
    width: 500px;
  }
}

 

 

@Keyframes rule : 2개 이상의 애니메이션 중간 상태(프레임) 지정

 

예제

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
}
.box:hover{
  animation: my-animation 3s infinite
    alternate;
}

@keyframes my-animation{
  0% {
    width: 100px;
    background: tomato;
  }
  75%{
    width: 500px;
    background: dodgerblue;
  }
  100%{
    width: 300px;
    background: yellowgreen;
  }
}

 

 

 

[animation 속성]

animation-timing-function : 타이밍 함수(애니메이션 효과) 지정

 

값	의미	기본값	Cubic Bezier 값
ease	빠르게-느리게	ease	cubic-bezier(.25,.1,.25,1)
linear	일정하게		cubic-bezier(0,0,1,1)
ease-in	느리게-빠르게		cubic-bezier(.42,0,1,1)
ease-out	빠르게-느리게		cubic-bezier(0,0,.58,1)
ease-in-out	느리게-빠르게-느리게		cubic-bezier(.42,0,.58,1)
bezier(n,n,,n,n)	자신만의 값을 정의(0~1)
steps(n)	n번 분할된 애니메이션

 

 

[animation 속성]

*animation-delay 음수사용 예제

<div class="box box1">0s</div>
<div class="box box2">1s</div>
<div class="box box3">-1s</div>

.box{
  width: 150px;
  height: 100px;
  border-radius: 10px;
  margin:10px;
  color: white;
  font-size: 24px;
  display:flex;
  justify-content: center;
  align-items: center;
}
.box1{ background: tomato; }
.box2{ background: dodgerblue; }
.box3{ background: yellowgreen; }

.box1:hover{
  animation: size-up 1s 2 alternate linear 0s;
}
.box2:hover{
  animation: size-up 1s 2 alternate linear 1s;
}
.box3:hover{
  animation: size-up 1s 2 alternate linear -1s;
  /*1초가 지난애니메이션에서부터 바로시작*/
}

@keyframes size-up{
  0%{
    width: 150px;
  }
  100%{
    width: 500px;
  }
}

 

 

[animation 속성]

animation-iteration-count : 애니메이션의 반복 횟수를 설정

 

값	의미	기본값
숫자	반복 횟수 설정	1
infinite	무한 반복

 

 

[animation 속성]

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

 

값	의미	기본값
normal	정방향만 반복 →	normal
reverse	역방향만 반복 ←
alternate	정방향→역방향 왕복
alternate-reverse	역방향→정방향 왕복

 

예제

<div class="box"></div>

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
  margin: 30px;
  animation: movemove 2s;
  animation-timing-function: linear;
  animation-iteration-count: 2;
  animation-direction: alternate reverse;
}

@keyframes movemove{
  0%{
    transform: translate(0,0);
  }
  25%{
    transform: translate(100px,0);
  }
  50%{
    transform: translate(100px,100px);
  }
  75%{
    transform: translate(0,100px);
  }
  100%{
    transform: translate(0,0);
  }
}

 

 

하던거??

<div class="box"></div>

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
  margin: 30px;
  animation: movemove 2s 2s linear;
  animation-fill-mode: both;
}

@keyframes movemove{
  0%{
    transform: translate(100px, 100px);
    background: dodgerblue;
  }
  100%{
    transform: translate(300px,100px);
    background: yellowgreen;
  }
}

 

 

[animation 속성]

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

 

값	의미	기본값
none	기존위치에서 시작→애니메이션 시작 위치로 이동 → 동작→기존위치에서 끝	none
forwards	기존위치에서 시작→애니메이션 시작 위치로 이동 →애니메이션 끝 위치에서 끝
backwards	애니메이션 시작 위치에서 시작→동작→기존위치에서 끝
both	애니메이션 시작 위치에서 시작→동작→애니메이션 끝 위치에서  끝

 

 

both 예제

<div class="box"></div>

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
  margin: 30px;
  animation: movemove 2s 2s linear;
  animation-fill-mode: both;
}

@keyframes movemove{
  0%{
    transform: translate(100px, 100px);
    background: dodgerblue;
  }
  100%{
    transform: translate(300px,100px);
    background: yellowgreen;
  }
}

 

 

[animation 속성]

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

 

값	의미	기본값
running	애니메이션을 동작	running
paused	애니메이션을 정지

 

예제

<div class="box"></div>

body{
  padding: 20px;
}
.box{
  width: 150px;
  height: 100px;
  background:tomato;
  border-radius: 10px;
  animation: size-up 3s linear infinite alternate;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box::before{
  content: "running";
  font-size:20px;
  color:white;
  font-weight: 700;
}
.box:hover{
  animation-play-state: paused;
  background: dodgerblue;
}
.box:hover::before{
  content: "paused";
}

@keyframes size-up {
  0%{
    width: 150px;
  }
  100%{
    width: 100%;
  }
}

 

Multi Columns (다단)

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

 

columns

: 다단을 정의. 단축속성

 

값	의미	기본값
auto	브라우저가 단의 너비와 개수를 설정	auto
column-width	단의 최적너비 설정 (px,em,cm 단위)	auto
column-count	단의 개수 설정	auto

 

*column-width: 각 단이 줄어들 수 있는 최소 너비를 설정하며, 요소의 너비가 가변하여 하나의 단이 최소너비보다 줄어들 경우 단의 개수가 조정됨

 

columns: 너비 개수;

 

 

column-gap : 단과 단 사이의 간격 설정

 

값	의미	기본값
normal	브라우저가 단의 너비와 개수를 설정	normal
단위	px,em,cm 단위

 

 

 

column-rule : 단과 단 사이의 (구분)선을 지정

 

값	의미	기본값
column-width	선의 두께를 지정	medium
column-style	선의 종류를 지정	none
column-color	선의 색상을 지정	요소의 글자색과 동일

 

column-rule: 두꼐 종류 색상;

 

예제

<p>적당히 긁어온 글 넣기</p>

p{
  color: red;
  text-align: justify;
  columns: 150px 3;
  column-gap: 20px;
  column-rule: 2px solid blue;/*색상을 적지않으면 font color와 같은색상이 적용된다*/
}