css 애니메이션

CSS 애니메이션

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다.

@keyframes

keyframes을 활용하기 위해선 , 먼저 css로 키프레임 블록을 만들어야 한다.

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

예시) 회전하는 키프레임 애니메이션

@keyframes lotate{
	0%{
    	transform: rotate(0deg)
    }
    50%{
        transform: rotate(180deg)
    }
    100%{
        transform: rotate(360deg)
    }
}

animation 속성

animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있다.

• animation-name : 애니메이션의 중간 상태를 지정하는 이름. @keyframes 블록에 작성
• animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
• animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
• animation-direction : 애니메이션 재생 방향을 지정
• animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
• animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
• animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

animation-name

animation-duration

animation-delay

 #logo{
	animation: lotate 3s 3s; 
}

animation-direction

예시 2개 세번째 속성이 animation-direction 이다.

 #logo {
	animation : lotate 3s reverse ;
}

 #logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-direction : alternate;
}

• normal: 기본 값, 재생이 끝나면 다시 시작
• reverse: 역방향으로 재생
• alternate: 순방향 - 역방향 번갈아 재생
• alternate-reverse: 역방향- 순방향 번갈아 재생

animation-iteration-count

애니메이션 몇 번 재생? 기본 값1
infinite 무한 반복
소수점을 작성할 경우 재생 도중 처음 상태로 돌아간다. (예를 들어, 재생 시간이 3초일 때, 0.6을 전달할 경우 3 * 0.6을 한 1.8초만큼만 재생되고 처음 상태로 돌아간다.)

 #logo {
	animation : lotate 3s infinite ;
 // 애니메이션 무한반복
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-iteration-count : 3;
    // 애니메이션 3번 반복 
}

animation-play-state

애니메이션 재생상태 설정
기본 값 running
정지 pause

 #logo{
	animation: lotate 3s pause;
}

 #logo{
	animation: lotate; 
	animation-duration : 3s; 
	animation-play-state : pause; 
}

animation-timing-function

애니메이션 진행 속도 설정
전달 값

• linear
• ease
• ease-in
• ease-out
• ease-in-out

animation-fill-mode

애니메이션 재생 전 후의 상태 지정

• none : 기본 값. 재생중이 아닌 경우 요소의 스타일 유지
• forwards : 재생중이 아닌 경우 마지막 키프레임 스타일 유지
• backwards : 재생중이 아닌 경우 첫번째 키프레임 스타일 유지
• both : 재생 전에는 첫 번째 키프레임 스타일, 재생 후에는 마지막 키프레임 스타일 유지

@keyframes 중간값

중간값을 50%에서 80%로 바꾸면,
재생되는 3초동안 80%인 2.4초동안 180도 회전하고 나머지 20% 0.6초동안 360도까지 회전한다.
=> 키프레임을 설정하면서 주는 중간값은 애니메이션 재생 시간을 기준으로 한다.

활용 예시

@keyframes ball {
  0% {
    top: 0px;
    background-color: #fff;
  }
  95% {
    width: 100px;
    background-color: cornflowerblue;
  }
  to {
    top: 300px;
    width: 115px;
    height: 90px;
    transform: translate(100px, 100px);
    background-color: rgb(56, 94, 165);
  }
}

div {
  position: relative;
  left: 100px;
  top: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: blue;
  animation: ball 1s ease-in Infinite Alternate;
}