CSS - 9 [animation, Animista]

animation

 transform과는 다르게 어떠한 움직임으로 상태를 변화시키켜 애니메이션을 만드는 것말고

그냥 화면에 자동으로 애니메이션이 동작하는 경우

 

@keyframes 애니메이션이름{

    from{

        transform:
    }

    to{

        transform:

    }

}

 

tag {

    animation: 애니메이션이름 시간 ease-in function
}

- from 부터 to까지 움직이는 animation을 만들고 싶다.

 

이제는 애니메이션의 스탭을 줘보자

: 상태를 여러 형태로 바꾸면서 이어지게 하자

 

위와 같이 여러 단계별로 나누어서 상태를 변화 시킬수 있다.

단계는 1% 2% 등 0~ 100%까지 나눌수 있다.

 

무조건 애니메이션을 transform으로만 만들라는 것은 아니다.

border-radius: 50%등 원으로도 만들수도 있다.

 

애니메이션으로 만들수 없는 attributes

- font-size등 몇개 있으나 실제로 시도를 해봐야 알 것같다.

(실제 폰트 사이즈를 높이려면 그냥 scale을 쓰자)

 

Animista

- CSS를 사용하기 위해 준비된 컬렉션

animista.net/

Animista

- 위와 같은 화면에서 애니메이션을 다양하게 설정하여 자신이 움직이게 하고 싶은 애니메이션을 만든다.

 

- 가장 우측 의 3가지 버튼중  {.} 모양을 클릭하면 

- 위 코드는 위쪽은 예시 코드이고

- 아래 코드는 keyframes 코드이다.

코드를 보면

/* ----------------------------------------------
 * Generated by Animista on 2020-9-25 21:52:17
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

 

- 이렇게 긴 코드로 쓰여져있으나 아래 부분인 keyframes만 복사해서 실제 코드에 넣으면 

예시 코드를 보고 이미지에 이렇게 적용을 해주면 성공적으로 애니메이션이 적용이된다.