[css] keyframe을 사용한 무한 loading

keyframe으로 무한대로 스핀하는 효과를 연습해보았다.

글자 안에 있는 원숭이 이미지는 고정하고,
그 이미지를 감싸는 텍스트들은 무한 스핀하도록 효과를 주었다.

먼저, loader라는 부모 요소 안에
내용이미지(=원숭이), 내용이미지를 감싸는 이미지(=텍스트) 두개를 넣어서 작성했다.




html

<div class="loader">
        <div class="img-box"><img src="./img.png" alt="" class="img"></div>
        <div class="img-box"><img src="./text.png" alt="" class="text"></div>
</div>

loader 안에 img-box들을
position을 사용해서 정 가운데 위치하게 했고,

css

.loader {
    position: relative;
    width: 500px;
    height: 500px;
    background: #000;
}
.img-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

spin이라는 keyframe에 0%일때와, 100%일 때 rotate 각도를 각각 준 다음, animation으로 text에 일정한 속도(=linear)로 무한하게(=infinite) 스핀할 수 있도록 아래와 같이 spin이라는 keyframe을 준다.

.img-box .text{
            animation: spin 25s linear infinite;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

• amination의 설정값은 밑을 참고할 것!
  /
  진행되는 동안의 속도에 관한 설정 기본값 ease
  ease : 천천히 시작되고 속도가 줄어들면서 끝난다(속도차이 매우 미세)
  ease-in : 천천히 시작
  ease-out : 빠르게 시작
  ease-in-out: 빠르게 시작되어 평균속도 유지 (속도차이큼)
  linear : 일정한 속도로 진행
  step-start : 시작하자마자 순간적으로 바뀜 (아래에서는 시작과 끝이 같아서 확인불가)
  step-end : 시작 유지되다가 끝날때 순간적으로 바뀜.(아래에서는 시작과 끝이 같아서 확인불가)
  steps(5, end or start) : 5번으로 나누어 끊어지듯 진행됨 예) 10초동안 진행되는 애니메이션이라면
  steps(5,end) 일 경우 -> 2,4,6,8초에 순간적으로 변화
  steps(5,start) 일 경우 -> 0, 2,4,6,8초에 순간적으로 변화
  /

참고사이트 : animation ease linear steps 값의 차이
https://gahyun-web-diary.tistory.com/37