@keyframes, animation

@keyframes

@keyframes는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다.
keyframes 리스트가 유효하려면 0% ~ 100%와 같은 시간에 대한 규칙을 포함해야 한다. 만약 이 타임 오프셋이 정해져 있지 않으면 parser가 인식하지 않아 keyframes 선언을 무효시킨다.
만약 한개의 이름에 대해서 여러개의 keyframes set이 존재하면 parser가 마지막으로 마주치는 keyframe set만 유효하다.

@keyframes 사용

@keyframes를 사용하기 위해선 아래의 3가지가 필요하다.

• animation-name : 사용자가 직접 지정한 이름, @keyframes가 적용될 애니메이션의 이름
• 스테이지 : from - to 또는 0~100% 의 구간
• CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일

@keyframes name{
 0%{
 	opacity:1;
 }
 
 50%{
 	opacity:2;
 }
 
 100%{
 	opacity:3;
 }

}

@keyframes name{
	from{
    	opacity:1;
    }
    
    to{
    	opacity:3;
    }
}

animation 속성 종류

• animation-name: @keyframes 이름
• animation-duration: 타임프레임 길이. 애니메이션 시작부터 마지막까지 총 지속시간
• animation-timing-function: 애니메이션 속도 조절 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier
• animation-delay: 애니메이션이 시작하기 전 지연시간
• animation-iteration-count: 반복 횟수
• animation-direction: 루프 (loop) 방향. 정방향으로 반복, 역방향으로 반복, 번갈아가며 반복 등을 설정
• animation-fill-mode: 애니메이션 시작/끝 상태 제어 ( none | forwards | backwards | both )

div{
  position:absolute;
  left:100px;
  width:100px;
  height:50px;
  margin-left:-50px;
  background-color:#000;
  color:#fff;

  animation-name: name;
  animation-duration:2s;
  animation-duration: leaner;
  animation-iteration-count:3;
  animation-direction:alternate;
  animation-fill-mode: forwards;
}

@keyframes name {
  0% {
    left:100px;
  }
  100% {
    left:300px;
  }
}