CSS3의 animation으로 배경 애니메이션을 쉽게 구현: 둥둥 떠다니는 구름

배경 애니메이션을 적절하게 사용하면 웹 페이지에 예상치 못한 효과를 가져올 수 있다.과거에 우리는 플래시나 자바스크립트로만 실현할 수 있었다.다행히도, CS3의 유행으로 우리는 다른 프로그래밍 기술에 의존하지 않고 이 효과를 실현할 수 있게 되었다.간단한 CSS 코드 한 토막으로 아래의 효과를 쉽게 얻을 수 있다.
느릿느릿한 구름
CSS 코드
이런 배경 애니메이션은 배경도의 위치를 이동함으로써 이루어진 것으로 여기에는 CSS3transition을 사용하지 않고 animation를 사용한다.

@keyframes animatedBackground {

  from { background-position: 0 0; }

  to { background-position: 100% 0; }

}

위쪽은 애니메이션 정의이고 아래쪽은 배경 그림이 있는 페이지 요소에 적용합니다.

#animate-area { 

  width: 560px; 

  height: 400px; 

  background-image: url(bg-clouds.png);

  background-position: 0px 0px;

  background-repeat: repeat-x;



  animation: animatedBackground 40s linear infinite;

}

배경 구름 그림은 40초에 한 번씩 미끄러져 우아하게 왼쪽에서 오른쪽으로 이동하고 틈이 없이 다음 순환과 연결되어 무한 순환으로 떠내려간다.
더 이상 js가 애니메이션을 조작할 필요가 없는 것은 얼마나 사람을 기쁘게 하는 일인가!이러한 CSS 쓰기에는 브라우저 엔진 호환 접두사가 붙어서 보기 싫지만 적어도 이전보다 훨씬 효율적이고 설정하기 쉽다.
데모 보기
(영어: davidwalsh.)