[moin-review] 2021-11-18

김_리트리버·2021년 11월 19일
0

Facts

  • 송금 진행 progress-bar 적용
  • header 수정사항 반영
  • header test code 추가
  • 미국 수취인 form
  • 주소 input 수정
    • address 따로 설정?

Findings

animation

특정 element 의 style 을 점진적으로 변화시키는 것

특정 시간동안 css style 을 변화시킬 수 있는 속성

@keyframes 속성에 css style 을 어떻게 변화시킬 건지 정의할 수 있다.

animation-duration

  • 애니메이션의 시간을 지정
  • 속성이 지정되지 않으면 0s 로 간주하기 때문에 animation 이 발동되지 않으니 주의

animation-timing-function

  • animation 의 속도함수 를 지정할 수 있다.
  • 빠르게 시작했다가 느리게 끝난다던지 , 일정한 속도를 유지한다던지 등

animation-fill-mode

  • 애니메이션의 끝난 후의 속성을 지정할 수 있다.
  • forwards : last keyframe ( 애니메이션 끝난 후 style )
  • backwards : first keyframe ( 애니메이션 시작 전 style )

animation 속성에 6가지 각각의 속성들을 한꺼번에 쓸 수 있다.

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div {
  animation: example 5s linear 2s infinite alternate;
}

Feelings

딱히 없음.

profile
web-developer

0개의 댓글