다음 사이트가 참고되었습니다.
vscode도움말 : 개발자를 위한 웹 기술 > CSS > animation

애니메이션

속기 옵션은 다음과 같습니다. 

/* @keyframes duration | easing-function | delay |
  iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
애니메이션 테그 상세
구문 효과 옵션
animation-duration 수행시각 s(초), ms(밀리초)
1.2s : 1.2초
animation-timing-function 움직임의 자연스러운 연출 linear, ease-in, ease-out, ease-in-out,
linear(진행도 진행률%, 진행도 진행률% ...)
cubic-bezier(시작x, 시작y, 끝x, 끝y좌표),
step(숫자, [옵션=start, end])
animation-delay 지연시작 s(초), ms(밀리초)
1.2s : 1.2초
animation-iteration-count 진행 횟수 정수, 소수, infinite(무한)
animation-direction 수행방향 normal(정방향:설정방향)
reverse(역방향)
alternate(정방향+역방향)
alternate-reverse(역방향+정방향)
animation-fill-mode 애니메이션이 끝난 후 none, backwords, forwards(끝난 상태 유지), both H_animation >> a_fillmode.html
animation-play-state 재생과 정지 running(재생), paused(정지)
animation-name 상세설정을 기록한 키프레임 키프래임 작성 방법 참고

ease function

eaas의 표현 방식 "ease.svg", mozilla, easing-function , CC-BY-SA v2.5 or any later version

애니매이션의 자연스러운 연출을 위해서 아래와 같이 시간에 따른 움직임을 조절 할 수 있습니다.

ease 테스트

위의 파란 공은 linear(선형) 움직임을 보여주며, 아래 초록 공은 사용자가 선택한 움직임을 기준으로 움직입니다.

아래 파란 공 움직임 선택하기:

베지어 곡선에 대한 자세한 내용은 베지어 문서를 참조해주세요.

방향

animation-direction:
animation-timing-function:
animation-duration:

멈춤

마우스가 올라가 있을 때만, 회전 에니메이션이 동작합니다. 

div{
  animation-play-state: paused;
}
div:hover{
  animation-play-state: running;
}

키프레임

animation-name : keyframes move-right; 
@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

응용

H_animation >> b_delay.html

사용자 스크롤이 지나가면 애니메이션을 수행한다.

안녕하세요.

응용기술, 공유

codepen은 개발환경 및 공유 환경을 제공합니다. 아래 예제는 codepen에서 제공하는 예제 중에 embeded항목으로 빌려왔습니다.

See the Pen Machinery dreams by peyman (@pfndesign) on CodePen.

화려하게 보이는 효과는 결국 화려하게 애니메이션이 만든다기보다, 각 키프레임(정지영상)을 얼마나 화려하게 구현하는가에 따라 달라집니다. 효과는 CSS: 다양한 효과을 참고 해주세요.

마우스 올리기

▶ 1번째 줄 →
→ 2번째 줄 ◀
▶ 3번째 줄 ←

로딩

HTML을 이용 SVG를 이용

스크롤

Hello
  • world !
  • bob !
  • users !
  • everybody !

버튼

버튼이 커졌다가 줄어들면서, 체크 이미지가 보여집니다.

@(Rule)없는 애니메이션

transition 속성을 이용하여, 애니메이션을 만들 수 있습니다.

※ 본 예제에서 회전을 적용했는데, 회전시 target의 hit박스가 회전하기 때문에, 본의 아니게 덜그럭 거리는 모습이 보여지기도 합니다. (붉은 색이 히트박스입니다.)

#my-id { transition: attr }
#my-id:hover { attr: value }

도형그리기

토글 스위치

위 예제는 다음 사이트에서 참고하였습니다.
http://alexkatz.me/
https://blog.hubspot.com/website/css-animation-examples