HTML&CSS) 웹 애니메이션 - keyframes 사용 방법

keyframes

: 애니메이션이 동작할 전체 영역(시작과 끝)

  keyframes을 지정한 그 영역 안에서 애니메이션이 작동한다. => 전체적인 틀을 만듦!

 

특징

시작과 끝 사이에 중간 상태를 원하는 만큼 지정할 수 있다.

입력없이 스스로 작동할 수 있다. 

반복이 가능하다. 

 

 

 

keyframes 사용방법

CSS 파일에 @keyframes 애니메이션이름 { } 형태로 작성한다.   

시작과 끝은 퍼센트(%)와 from~to 두 가지 방법으로 지정할 수 있다. 

@keyframes ballBounce {
  0% { top: 20px; }
  50% { top: 400px; }
  100% { top: 20px; }
}

 

 

 

Animation 속성

name : 내가 만들 애니메이션의 이름

 

duration : 애니메이션 작동 시간. 단위는 s, ms

delay : 요소가 로드되고 언제 애니메이션이 시작될지 지정. ex) 버튼 누르고3초 뒤 시작 

direction : 애니메이션 진행방향. 

              normal(시작-끝), alternate(왔다갔다), reverse(역방향)

iteration-count : 애니메이션을 몇 번 반복할지 결정. infinite로 하면 무한히 반복한다.

animation-play-state : 애니메이션을 멈추거나 다시 시작.

              paused(멈춤) running(시작)

animation-timing-function : 애니메이션의 속도 조절. (fase/slow)

              linear(속도 일정), ease-in(s-f), ease-out(f-s), ease-in-out(s-f-s)

animation-fill-mode : 애니메이션이 끝나고 그대로 있을지, 원래대로 돌아올지 설정.

 

=> 속성들을 한꺼번에 쓰기

     animation: name  duration  time-funtion  delay  count  direction  순서로 적는다. 

ex) animation : ani        1s             linear      0.5s   infinite  alternate;

 

 

 

 

상하로 움직이는 공 만들기

먼저, 공 모양 만들기

<div class="app">
   <div class='boxbox'></div>
</div>

.boxbox {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: lightblue;

  /*공의 기본 위치 지정*/
  position: absolute;
  top: 20px;
  left: 50px;
}

키프레임 만들기

@keyframes boxFade {
  0% { top: 20px; }
  50% { top: 400px; }
  100% { top: 20px; }
}

애니메이션 속성 적용하기

.boxbox {
 /* 추가 */
   animation: boxFade 2s 1s infinite linear alternate;
}

 

=> 공이 상하로 왔다갔다 하는 애니메이션이 작동한다! 😄