백그라운드 무빙 css 애니메이션 효과주기

백그라운드 무빙 css 애니메이션 효과주기

백그라운드에 무빙(Moving) CSS 애니메이션 효과를 주기 위해 @keyframes 규칙을 사용할 수 있습니다. @keyframes 규칙은 애니메이션에 대한 키프레임(시작과 끝 상태)을 정의하는데 사용됩니다.

워드프레스 배경에 모션을 주기위한 css 활용법.

animation-iteration-count: infinite; 에서 infinite의 의미는 애니메이션이 무한 반복 하도록 선언하는것입니다.

@keyframes float{
    0%, 200%{transform: translateY(0);}
    50%{transform: translateY(-50px);}
}

@-webkit-keyframes float{
    0%, 200%{-webkit-transform: translateY(0);}
    50%{-webkit-transform: translateY(-50px);}
}
div#bg_mostion {
    position: absolute;
    top: 1030px; /*이미지 시작의 기준*/
    z-index: 0;
    height: 1380px; /*이미지 세로 사이즈 값*/
}

.float {
    -webkit-animation: float 3s;
    animation: float 10s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/*워드프레스 적용시 color section 에서 활용할 수 있음.*/

border 스타일을 인라인형태로 명하듯이 animation 에서도 적용이 가능하다.

animation: “클래스명”  4s infinite; 한줄로 가능하다.

beautifulcss.com의 관련 내용을 참조바람.

 

다음은 백그라운드에 무빙 CSS 애니메이션 효과를 주는 예시 코드입니다:

 

@keyframes moving-animation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

.element {
  background-image: linear-gradient(to right, red, blue);
  background-size: 200% 200%;
  animation: moving-animation 5s linear infinite;
}

위의 코드에서 @keyframes 규칙은 moving-animation이라는 이름의 애니메이션을 정의합니다. 0%와 100% 상태에서 background-position 속성을 변경하여 백그라운드의 위치가 왼쪽 위에서 오른쪽 아래로 이동하도록 설정했습니다.

.element 선택자는 애니메이션을 적용하고자 하는 요소를 선택합니다. background-image 속성은 백그라운드에 그라데이션을 생성하고, background-size 속성은 그라데이션의 크기를 200%로 설정합니다. animation 속성은 moving-animation 애니메이션을 5초 동안 선형으로 반복하도록 설정합니다.

이렇게 설정된 CSS 코드는 선택한 요소의 백그라운드에 무빙 애니메이션 효과를 줄 수 있습니다. background-position 속성의 값을 조정하면 다양한 움직임 및 방향의 애니메이션 효과를 구현할 수 있습니다.