keyframe을 사용하여 CSS만으로 배경 이미지를 만들었습니다.

animation과 keyframe을 사용하면 CSS에서 애니메이션을 쉽게 구현할 수 있습니다.
이 사이트를 만들 때 animation과 keyframe을 사용했으므로 사용법을 소개합니다.


Elastic | A collection of background image created by CSS only

코드는 여기에 올라 있습니다.
htps : // 기주 b. 코 m / 소 r / 에 s c

keyframe이란?

자세한 내용은 여기 (@keyframes - CSS | MDN ) 에 나와 있습니다만, 간단히 설명하면 CSS animation 의 흐름의 중간 지점을 제어할 수 있습니다.
10%에서는 이 상태, 50%에서는 이 상태, 80%에서는, , , 같은 느낌입니다.

모던 브라우저에는 모두 대응하고 있어 IE도 10 이후에는 대응하고 있습니다.

옵션 목록

animation 속성에 옵션을 설정하여 미세한 동작을 지정할 수 있으며,
다음 옵션을 붙일 수 있습니다.
※( ) 안은 디폴트 값

animation-name (none) 필수
애니메이션 이름 지정

animation-duration (0) 필수
애니메이션 한 번의 시간 길이 지정

animation-timing-function (ease)
애니메이션 타이밍 및 진행 비율 지정

animation-delay (0)
애니메이션이 시작되는 시점 지정

animation-iteration-count (1)
애니메이션의 반복 횟수 지정
infinite를 지정하면 무한대로 재생을 반복합니다

animation-direction (normal)
애니메이션을 교대로 반전 재생할지 여부 지정

animation-play-state (running)
애니메이션을 일시 중지하거나 다시 시작합니다.
마우스 오버시 움직임을 멈추고 싶을 때 사용할 수 있습니다

animation-fill-mode (none)
애니메이션을 실행하기 전이나 실행한 후에 어떤 스타일을 적용할지 설정하기

이러한 옵션과 keyframes 내의 퍼센트의 값을 구사하는 것으로 복잡한 애니메이션도 비교적 간단하게 구현할 수 있습니다.

사용 방법의 예

.css {
  animation: spin 10s linear infinite;
}
@keyframes spin {
  0% {
    width: 50px;
    transform: rotate(0deg);
  }
  50% {
    width: 100px;
    transform: rotate(120deg);
  }
  100% {
    width: 200px;
    transform: rotate(360deg);
  }
}

css 의 animation 속성으로 지정한 애니메이션명과 keyframes 의 식별자를 합치시켜 사용합니다 (위의 예라고 spin)
10s에 걸쳐 0%에서 100%까지 식별자 spin이 애니메이션됩니다.
초기값이 0%인 width: 50px; transform: rotate(0deg); ,
5s 후에 width: 100px; transform: rotate(120deg); ,
10초 후에 width: 200px; transform: rotate(360deg); 되고 0% 값으로 돌아가 반복됩니다.

배경 이미지에 keyframe, animation을 사용하는 샘플 사이트를 만들었으므로 실제로 움직임을 확인해보십시오.
Elastic | A collection of background image created by CSS only