Html/Css

애니메이션

@keyframes 키워드를 활용하여 시간 순서대로 짜여진 애니메이션을 만들 수 있다.

  
@keyframes 애니메이션이름 {
  0% {
    /*from*/
    css속성: 속성값;
  }

  50% {
    css속성: 속성값;
  }

  100% {
    /*to*/
    css속성: 속성값;
  }
}

animation 속성

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

예시

  
@keyframes lotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

animation-name

애니메이션을 적용하고 싶은 요소에 첫 번째 값으로, 애니메이션 이름을 작성해준다.
1 2 3 .logo { animation: lotate; /*animation-name: lotate*/ }

animation-duration

애니메이션이 재생될 시간을 속성의 두 번째 값으로 시간 단위로 작성해준다.

작성하지 않을 경우 기본값이 0이기 때문에 재생되지 않는다.

  
.logo {
  animation: lotate 2s;
  /* animation-duration : 2s */
}

animation-delay

애니메이션 재생을 미룰 시간을 지정한다.

속성에 띄어쓰기로 구분해준 다음, 시간 단위로 작성한다.

  
.logo {
  animation: lotate 2s 3s;
  /* animation-delay : 3s */
}

animation-direction

애니메이션 재생 방향을 지정한다.

속성에 띄어쓰기로 구분해준 다음, 재생 방향을 작성한다.

  
.logo {
  animation: lotate 3s reverse;
  /*animation-direction: reverse*/
}

animation-iteration-count

애니메이션이 몇 번 재생될지 지정한다.
기본 값은 1이며, 설정한 횟수만큼 애니메이션이 반복 재생 된다.
infinite로 설정할 경우 무한 반복 되며, 소수점을 작성할 경우 재생 도중 처음 상태로 돌아간다.

재생시간이 3초일 때, 0.6을 전달할 경우 3*0.6을 한 1.8초만큼 재생되고 처음 상태로 돌아간다.

  
.logo {
  animation: lotate 3s infinite;
  /*animation-iteraction-count: 3*/
  /*애니메이션이 3번 반복된다.*/
}

animation-play-state

애니메이션의 재생 상태를 설정한다.
기본 값은 running, 애니메이션을 정지시키는 puase를 값으로 지정할 수 있다.

보통 이벤트로 애니메이션의 재생 상태를 변경할 때 사용한다.

  
.logo {
  animation: lotate 3s pause;
  /*animation-play-state: pause*/
}

animation-timing-function

애니메이션의 진행 속도를 설정한다.

animation-fill-mode

애니메이션 재생 전 후의 상태를 지정한다.
- none : 기본 값, 재생 중이 아닌 경우 요소의 스타일을 유지한다.
- forwards : 재생 중이 아닌 경우 마지막 키프레임 스타일을 유지한다.
- backwards : 재생 중이 아닌 경우 첫 번째 키프레임 스타일을 유지한다.
- both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지한다.

예시 1

움직이는 사각형 만들기

예시 2

공 튀기기

HTML/CSS 4장 - animation