CSS3 애니메이션 속성 지정 하기

2. 애니 메이션 속성
  1) animation: 모든 애니메이션 속성을 한번에 적용함
  2) animation-delay : 이벤트 발생 후 몇초 후에 재생할지 지정함
  3) animation-duration: 애니메이션을 몇초 동안 재생할지 지정함
  4) animation-iteration-count: 애니메이션의 반복 회수를 지정함
  5) animation-name : 애니메이션 이름을 지정함
  6) animation-play-state: 애니메이션 재생상태를 지정함
  7) animation-timing-function: 수치변형 함수를 지정함

3. 키 프레임
 - CSS3 에서 애니메이션을 지정하는 형식을 키 프레임 규칙라고 하며,
   @Keyframes 로 시작한다.
 예)
   @Keyframes rint {

  from{

   left:0;
   transform: rotate(0deg);
           }
   50% { left : 500px ; }
     to { left:500px; transform:rotate(360deg);
  }
    }

-animation-duration 이 2초라면 1초후 왼쪽으로 500 px 이동함
    - 이후 1초후 360도 회전함

4. CSS3 변환
 - 앞에서 사용했던 변형 속성과 애니메이션 속성을 사용한다
 - HTML5 에서는 별도의 플러그인 도움없이 3차원 공간을 구현한다.

  1) 2차원 변환 함수
  1. translate(): 일정한 거리만큼 이동
  2. scale() : 특정한 배율만큼 확대 및 축소
  3. skew(): 특정한 각도만큼 기울임
   4. rotate() : 각도만큼 회전 함

 

2. transform-origin 속성
 - 변환되는 기점을 어디로 할것인지 정하는 것이다. 즉 변환 중심.

3. transform-style 속성
 - 이 속성은 영향력이 자신에게만 적용될지 자손에게도 적용될지를 지정함
 1) transform-style:flat; 자손의 3차원 속성을 무시함
 2) transform-style: preserve-3d; 자손의 3차원 속성을 유지함

4. backface-visibility 속성
 -3 차원 공간에서 평면의 후면을 보이거나 보이지 않게 만드는 스타일 속성이다

 1) backface-visibility : visible; 후면을 보이게 처리함
 2) backface-visibility : hidden; 후면을 감춤