background image로 루프 이미지 애니메이션을 설정할때 반응형으로 하기.

이미지가 흘러가는 이미지가 아닌 해당 영역의 전체 배경을 채우는 이미지가 돌아가야 할때. 이미지가 양 끝이 이어지는 이미지로 하게 되는 이미지의 경우 높이를 지정해주고 keyframe으로 애니메이션을 주어야 한다

    .test{
        background:url('test.png');
        width:100%;
        height:1200px;
        position:absolute;
        top:0;
        background-size : 100% 1200px; //좌우넓이는 100%로 높이는 이미지의 원래 높이를 주자
        left:0;
        animation: displace 3s linear infinite;
    }
    @keyframes displace {
        from { background-position: center 0;
        } to { background-position: center 1200px }
    }

이런식으로 하면 배경이 반응형이면서도 무한루프일때 자연스러워진다. 이틀정도 고생한 내용