animation 속성들

transition속성으로 Animation 구현

 

단순한 애니메이션을 구현할 때 Transition 속성을 이용해서 구현한다.

아래의 스탭에 따라 애니메이션을 구현한다.

 

1. 시작스타일 정하기

2. 최종스타일 정하기

3. 언제 최종스타일로 변할지 트리거 주기 (대부분 마우스 올렸을 때임)

4. transition 으로 서서히 동작하게 만들기 

 

transition-delay: 1s; /* 시작 전 딜레이 */
transition-duration: 0.5s; /* transition 작동 속도 */
transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */
transition-timing-function: ease-in; /* 동작 속도 그래프조정 */

 

예시

.box{
    width: 100%;
    height: 100%;
    background : gray;
    opacity: 0;
    transition : all 1s; /* 위 css가 변경되면 1초에 걸쳐 서서히 변경되게 해줘! */
}

.box:hover{
	opacity: 1;
}

 

transform속성으로 Animation 구현

 

좀 더 복잡한 애니메이션을 구현할 때 transfrom 속성을 이용한다.

 

.box {
  transform : rotate(10deg); /* 회전 */
  transform : translate(10px, 20px); /* 좌표이동 */
  transform : scale(2);	/* 확대축소 */
  transform : skew(30deg); /* 비틀기 */
  
  /*transform 두개 이상을 한꺼번에 쓰려면*/
  transform : rotate(10deg) translateX(30px);
}

 

@keyframes

 

진행도에 따라서 애니메이션을 변경시킬 수 있다.

 

@keyframes 움찔움찔{
  0% {
    transform : translateX(0px); /* 애니메이션이 0%만큼 동작시 */
  }
  50% {
    transform : translateX(-20px); /* 애니메이션이 50%만큼 동작시 */
  }
  100% {
    transform : translateX(20px); /* 애니메이션이 100%만큼 동작시 */
  }
}

 

자신이 만든 keyframes를 첨부한다.

.box:hover {
  animation-name : 움찔움찔;
  animation-duration : 1s;
}

 

애니메이션 세부조정

.box:hover {
  animation-name : 움찔움찔;
  animation-duration : 1s;
  animation-timing-function : linear; /*베지어 주기*/
  animation-delay : 1s; /*시작 전 딜레이*/
  animation-iteration-count : 3; /*몇회 반복할것인가*/
  animation-play-state : paused;  /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
  animation-fill-mode: forwards;  /*애니메이션 끝난 후에 원상복구 하지말고 정지*/
}