[CSS] Sprite Image, Animation

1. Sprite Image

 

 - 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지

 - 이미지를 다운받기 위한 서버 요청을 단 번으로 줄일 수 있음(웹페이지 로딩시간 단축)

 

 

출처 : 패스트캠퍼스 박영웅

 

 

.icon {
    width: 100px;
    height: 100px;
    background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/apple-ipad-app/main/images/sprite_apps.png");
    background-position: -200px -100px;
    
    /* animation : sprite-icon 3s steps(1) infinite; */
    animation-name: sprite-icon;
    animation-duration: 3s;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;
}

@keyframes sprite-icon {
    /* 1~10 */
    0.00% { background-position: 0 0; }
    1.67% { background-position: -100px 0; }
    3.33% { background-position: -200px 0; }
    5.00% { background-position: -300px 0; }
    6.67% { background-position: -400px 0; }
    8.33% { background-position: -500px 0; }
    10.00% { background-position: 0 -100px; }
    11.67% { background-position: -100px -100px; }
    13.33% { background-position: -200px -100px; }
    15.00% { background-position: -300px -100px; }
  
    /* 11~20 */
    16.67% { background-position: -400px -100px; }
    18.33% { background-position: -500px -100px; }
    20.00% { background-position: 0 -200px; }
    21.67% { background-position: -100px -200px; }
    23.33% { background-position: -200px -200px; }
    25.00% { background-position: -300px -200px; }
    26.67% { background-position: -400px -200px; }
    28.33% { background-position: -500px -200px; }
    30.00% { background-position: 0 -300px; }
    31.67% { background-position: -100px -300px; }
  
    /* 21~30 */
    33.33% { background-position: -200px -300px; }
    35.00% { background-position: -300px -300px; }
    36.67% { background-position: -400px -300px; }
    38.33% { background-position: -500px -300px; }
    40.00% { background-position: 0 -400px; }
    41.67% { background-position: -100px -400px; }
    43.33% { background-position: -200px -400px; }
    45.00% { background-position: -300px -400px; }
    46.67% { background-position: -400px -400px; }
    48.33% { background-position: -500px -400px; }
  
    /* 31~40 */
    50.00% { background-position: 0 -500px; }
    51.67% { background-position: -100px -500px; }
    53.33% { background-position: -200px -500px; }
    55.00% { background-position: -300px -500px; }
    56.67% { background-position: -400px -500px; }
    58.33% { background-position: -500px -500px; }
    60.00% { background-position: 0 -600px; }
    61.67% { background-position: -100px -600px; }
    63.33% { background-position: -200px -600px; }
    65.00% { background-position: -300px -600px; }
  
    /* 41~50 */
    66.67% { background-position: -400px -600px; }
    68.33% { background-position: -500px -600px; }
    70.00% { background-position: 0 -700px; }
    71.67% { background-position: -100px -700px; }
    73.33% { background-position: -200px -700px; }
    75.00% { background-position: -300px -700px; }
    76.67% { background-position: -400px -700px; }
    78.33% { background-position: -500px -700px; }
    80.00% { background-position: 0 -800px; }
    81.67% { background-position: -100px -800px; }
  
    /* 51~60 */
    83.33% { background-position: -200px -800px; }
    85.00% { background-position: -300px -800px; }
    86.67% { background-position: -400px -800px; }
    88.33% { background-position: -500px -800px; }
    90.00% { background-position: 0 -900px; }
    91.67% { background-position: -100px -900px; }
    93.33% { background-position: -200px -900px; }
    95.00% { background-position: -300px -900px; }
    96.67% { background-position: -400px -900px; }
    98.33% { background-position: -500px -900px; }
  }

 

 

 

 

2. Animation

 

animation을 사용하려면 @keyframes(진행 과정)를 꼭 정의해서 사용!

 

(1) animation 속성

animation-name : @keyframes 규칙에 만들어진 프레임명
animation-duration : 지속 시간
animation-timing-function : 처리 단계(어떤 시간간격으로 진행할지)
animation-delay : 지연 시간(몇 초 뒤 실행)
animation-iteration-count : 반복 횟수(infinite는 무한대)
animation-direction : 진행 방향(alternate, reverse, normal)
animation-play-state : 동작, 일시정지
animation-fill-mode : 애니메이션이 끝난 후의 상태 설정(none, forwards, backwards, both)

 

 

(2) @keyframes

 - 애니메이션 진행과정을 정의하는 것

 - from, to로 시작과 끝을 정함(0%, 100%로 입력도 가능)

 

.item {
    width: 100px;
    height: 100px;
    background-color: orange;

    /* animation 속성 */
    /* animation : test 2s; */

    /* animation 개별 속성 */
    animation-name: test;
    animation-duration: 2s;
    animation-timing-function: linear;
    /* animation-timing-function: steps(4); */
}

@keyframes test {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

 

 

(3) animation vs transition 차이

animation (transition보다 디테일)	transition (간단)
- %를 사용하여 다양한 상태 정의 가능 - animation-fill-mode 속성으로 종료 후에도 원하는 대로 상태 유지 가능 - animation-play-state 속성으로 원하는 대로 시작, 정지 지정 가능 - animation-iteration-count 속성으로 반복횟수 지정 가능	- 두가지 상태만 지정 가능 - 종료 후에도 상태유지 불가능 - hover, click 같은 트리거가 있어야 동작 가능