[css] animation _애니메이션 사용하

Animaiton

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

CSS 애니메이션 사용하기

 

CSS animaiton

CSS스타일을 다른 CSS 스타일로 부드럽게 전환

- 키프레임 : 중간 상태를 나타내준다

자바스크립트보다 더 활용성이 좋을때가 있다. 브라우저 최적화 가능, 브라우저 부하 줄여줌

 

animation-하위속성

 

animation-delay

애니메이션이 언제 시작될지 delay(지연)시킴 . 해당 시간이 지나고 애니메이션이 시작됨

 

animation-direction

애니메이션이 종료되고 재시작시 처음방향 or 역방향 시작

 

animation-duration

애니메이션 자체가 얼마나 걸려서 진행될지 ( 한사이클 중심 )

 

animation-iteration-count

반복. infinite(무한반복)

 

animation-name

애니메이션의 중간상태 지정. @keyframes

 

animation-play-state

애니메이션을 멈춤 or 재시작

 

animation-timing-function

중간 상태들의 전환의 시간 간격

 

animation-fill-mode

애니메이션 시작전 or 끝난후 어떤값 적용될지 지정

 

@keyframes

중간 상태의 지점을 선택하여 어떻게 보일지 정할 수 있는 기준.

% 사용

from, to 사용

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

 from{시작하는 상태}

 to{끝나는 상태}

 

 

예제

p {
  animation-duration: 3s;
  animation-name: slidein;
}
 
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
 
  to {
    margin-left: 0%;
    width: 100%;
  }
}

 

오래된 브라우져

노트: 다음 예제들은 애니메이션 CSS 속성에 접두어가 사용되지 않았습니다(역자: -webkit-, -moz- 등). 오래된 브라우저는 접두어가 필요합니다.