[WEB]HTML, @keyframes 로 animaiton 만들기

HTML, @keyframes 로 animaiton 만들기

---

@keyframes 애니메이션 명

{ 

 0% { 애니메이션 시작 }
 50% { 애니메이션 시작하고 50% }
 100% {애니메이션 끝! }

}

@keyframes move_title {
  0% {
    transform: translateX(0px);
  }
  30% {
    transform: translateX(-50px);
  }
  60% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0px);
  }
}

0~100% 완료 될 때 까지의 동작을 수치 상으로 만들어 주면 된다

.menu-text-title:hover {
  animation-name: move_title;
  animation-duration: 2.5s;
}/*# sourceMappingURL=animation_sass.css.map */

애니메이션을 동작하기 위해서는 [ animation-name : @keyframe 이름]

[animation-duration: 애니메이션 동작 시간] 100%가 되기 까지 걸리는 시간을 작성 해준다

 

animation 속성

속성	설명	속성 값
animation-name	키프레임 애니메이션 이름을 지정. 특수문자를 제외한 문자열, 숫자, -,_ 를 조합해 1글자 이상.
animation-duration	애니메이션 재생 시간, 또는 반복 루프 1회를 도는 시간	0, 3s, 1.5s, 300ms 기본 값 0은 애니메이션 재생되지 않음. "s"(초), "ms"(밀리초) 단위로 표현 가능.
animation-timing-function	애니메이션 진행 속도, 또는 가속 방식을 지정. 미리 설정된 속도 커브 중 한가지를 선택.	linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) 중 한가지 선택 가능.
animation-delay	애니메이션 시작 지연 시간. "s"(초), "ms"(밀리초) 2가지 단위 사용 가능	0s, 0ms, 미지정: 지연 없이 즉시 애니메이션 시작. 3s: 3초 후 애니메이션 시작. 500ms: 0.5초 후 애니메이션 시작.
animation-direction	애니메이션 재생 방향	normal: 정방향 재생 reverse: 역방향 재생 alternate: 정방향과 역방향으로 한 번씩 번갈아 재생(정 방향 시작) alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생(역방향 시작)
animation-iteration-count	애니메이션 반복 횟수 지정	양수: 정수로 횟수 표기. 횟수만큼 애니메이션 반복 실행 후 정지. infinite: 무한 반복.
animation-fill-mode	애니메이션 시작 전, 종료 후 적용할 CSS 스타일을 지정. "none"은 요소의 CSS 스타일을 유지하며, 그 외에는 키프레임 애니메이션의 CSS 스타일을 유지함.	none: 기본 값. 애니메이션 중이 아닌 경우, 요소의 CSS 스타일을 유지함. forwards: 애니메이션 중이 아닌 경우, 애니메이션 마지막 키프레임의 CSS 스타일을 유지 함. backwards: 애니메이션 중이 아닌 경우, 첫 번째 애니메이션 키프레임의 CSS 스타일을 유지 함.(지연 시간 포함) both: 애니메이션 시작 전에는 첫 번째 애니메이션 키프레임을 유지하며, 종료 후에는 마지막 키프레임 애니메이션의 CSS 스타일을 유지함. "none" 과는 다름. "none" 과 "backwards" 속성 값은 애니메이션 중이 아닌 경우 다른 화면을 표시할 수 있으므로 주의해야 함.
animation-play-state	애니메이션의 초기 실행 상태를 결정. 웹페이지 로딩 후 애니메이션을 자동 실행할지 여부를 선택할 수 있음.	paused: 애니메이션이 일시 중지된 상태 유지 running: 애니메이션이 재생중인 상태.

출처 : https://blogpack.tistory.com/882