배경 이미지 무한 모션 주기

워드프레스 배경에 모션을 주기위한 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의 관련 내용을 참조바람.