https://github.com/esthel7/vue.js/pull/15

transition

변화 단계의 중간 움직임 생성

transition: property duration timing-function delay;

proterty → 변화 일으킬 css 속성명

timing-function → 변화 속도 지정하는 가속도(생략가능)

ease-in → 천천히 움직이다가 나중에 빠르게

ease-out → 빠르게 움직이다가 나중에 천천히

ease-in-out → 천천히 빠르게 천천히

delay → 몇 초 후에 동작할지 지정

transform

초기값에 영향을 미치지 않는 요소의 변형

scale(x,y) → 배율만큼 사이즈 조정

x, y 배율이 같으면 한번만 적어주기

translate(x,y) → 원래 위치를 기준으로 원하는 곳으로 위치

rotate(deg) → 각도를 나타내는 deg로 회전

skew(deg) → 비틀기 효과, 마름모꼴

transform-origin → 기준점을 지정해서 중심점 설정

• 차오르는 게이지 만들기

@keyframes fill {
  0% {
    width: 0;
  }
  100% {
    transform: scaleX(1);
  }
}