CSS로 간단한 반복 배경색 애니메이션을 만드는 방법

키프레임과 다양한 CSS 애니메이션 속성을 사용하여 순수 CSS로 간단한 애니메이션 배경 색상 루프를 만드는 방법을 알아보세요.

이 예에서는 HTML <body>를 타겟팅합니다. 요소를 CSS로 직접 사용할 수 있지만 다음 코드 예제를 모든 HTML 요소, 클래스 또는 ID에 적용할 수 있습니다.

코드

이 데모를 참조로 사용할 수 있습니다.

참고:이 코드는 IE9에서 작동하지 않습니다.

애니메이션 계획

결과가 어떻게 되어야 하는지 정확히 알지 못하더라도 가고자 하는 방향에 대한 아이디어를 갖는 것이 항상 실용적입니다. 코딩을 시작하기 전에 반복되는 애니메이션에 대해 몇 가지 사항을 설정해 보겠습니다.

몇 개의 배경색을 사용하시겠습니까?
총 애니메이션 지속 시간은 얼마나 됩니까?
어떤 유형의 애니메이션을 사용해야 하나요?

이 튜토리얼의 목적은 간단하게 유지하는 것이므로 다음을 사용합시다.

5가지 배경색
10초의 지속 시간(각 색상은 2초로 표시됨)
선형 애니메이션 곡선(애니메이션은 처음부터 끝까지 동일한 속도를 가짐)

나는 Coolers.co를 사용하여 이 예의 조화로운 색상 팔레트를 빠르게 생성했습니다.

다음은 향후 배경 애니메이션이 반복되는 16진수 색상입니다.

일몰 오렌지:#EE6055
중간 아쿠아마린:#60D394
옅은 녹색:#AAF683
연한 노란색:#FFD97D
비비드 탠저린:#FF9B85

그 이름을 모두 외울 필요는 없습니다(쿨러에서 직접 가져옴). 적절한 측정을 위해 추가한 것뿐입니다.

자, 이제 5가지 색상이 있으므로 각 색상을 2초 동안 표시하는 반복 애니메이션을 실행하겠습니다.

다음으로 우리는 우리의 계획에 따라 애니메이션을 만들 것입니다.

루핑 CSS 애니메이션 만들기

CSS에서 애니메이션 키프레임은 0%의 백분율로 작동합니다. 100%로 . 다음 CSS 키프레임 추가 스타일시트에:

/* Standard syntax */
@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

이제 backgroundColorPalette라는 키프레임 속성이 있습니다. 0%에서 균등하게 분할되는 5가지 색상 간격으로 100%로 애니메이션.

이제 body 요소의 CSS 규칙 세트를 생성할 시간입니다. 그러면 키프레임 색상 팔레트를 가져와 사용할 수 있습니다.

바디 셀렉터 규칙 세트 안에 다음 CSS 애니메이션 속성을 추가하고 브라우저 창에서 어떤 일이 일어나는지 살펴보세요.

body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

모든 작업을 올바르게 수행했다면 이제 2초 간격으로 색상에서 색상으로 부드럽게 전환되는 배경 색상 애니메이션을 계속 실행해야 합니다.

코드

이 데모를 참조로 사용할 수 있습니다.

CSS 작동 방식

먼저 animation-name 속성을 지정하고 backgroundColorPalette 값을 지정합니다. — 이제 앞에서 만든 배경색 키프레임이 body 요소에 할당됩니다.
animation-duration:를 사용합니다. 속성에 값을 10초로 지정합니다. 이제 애니메이션의 총 지속 시간은 10초입니다. 밀리초 10000도 사용할 수 있습니다. .
animation-iteration-count를 사용합니다. 속성을 지정하고 infinite 값을 지정합니다. . 이것이 애니메이션 루프를 지속적으로 만드는 것입니다. CSS에서 기본값은 1입니다. 애니메이션 주기.
animation-direction을 사용합니다. 속성에 alternate 값을 지정합니다. . 이렇게 하면 애니메이션이 처음부터 끝까지 그리고 끝에서 처음으로 재생됩니다. 우리는 이 속성 값을 사용하여 normal 애니메이션 방향 값.

알아두면 좋은 정보

기본적으로 CSS 애니메이션 속도 곡선 유형은 선형으로 설정됩니다. . 이것은 우리가 사용하고자 할 때 CSS 규칙 세트에서 속성을 선언할 필요가 없다는 것을 의미합니다. 이것이 앞의 예제에서 애니메이션 속도 곡선이 선형으로 실행되는 이유입니다.

그러나 여전히 animation-timing-function: linear;를 추가하고 싶을 수도 있습니다. 특히 팀에서 작업하는 경우 코드를 더 표현력 있게 만들기 위해 CSS 규칙 집합에 추가합니다. CSS에서 모든 속성 값이 기본적으로 활성화되어 있다는 것을 기억하기 어렵습니다.