CSS Animation

transform

transform 속성

CSS transform 은 기본적으로 요소의 중간이 원점 (0,0)이다. 속성에는 다음과 같은 것들이 있다.

  • scale
  • rotate
  • skew
  • translate

transform-origin

transform-origin 을 사용하면 transform 의 기준점을 바꿀 수 있다.

css

transform-origin 50% 50%; /* default */
transform-origin left top;
transform-origin 0% 0%;

transition

transition 속성

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

animation

animation 은 keyframe 을 통해 여러 가지 transform의 조합이 가능하다.

css

@keyframes sample-ani {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: transform(500px, 0);
    }
    100% {
        transform: transform(500px, 500px);
    }
}

.box {
    animation: sample-ani 2s;
}

animation 속성

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
    • normal
    • reverse
    • alternate
    • alternate-reverse
  • animation-fill-mode
    • forwards
  • animation-play-state
    • running
    • paused

Frame by Frame animation (Sprite)

css animation 으로 sprite 가 가능하다

css

@keyframes sprite-ani {
    100% {
        background-position: -2550px 0;
    } 
}
.sprite {
    width: 150px; /* 실제 이미지는 300px */
    height: 150px;  /* 실제 이미지는 5100px */
    background: url("images/sprite_image.png") no-repeat 0 0 / auto 150px;
    animation: sprite-ani 1s infinite steps(17);
}

CSS 3D

perspective

css

.parent {
    perspective: 1000px; /* 값이 작을 수록 변화가 더 큼 */
}

.child {
    ...
}