보통 css는 정해놓은 값들로 처리된다.
하지만 브라우저 리사이즈와 같은 인터렉션에 의해 사이즈나 속도등이 변경되었으면 할 css 값들이 있다. (특히 애니메이션 키프레임)
이럴 경우 자바스크립트를 활용해서 넣는 몇가지 방법이 있었지만 내가 쓰는 방법만 적어 놓겠다.
혹시 필요하면 구글에서 CSSStyleSheet.addRule() 과 CSSStyleSheet.insertRule()를 검색해서 더 많은 정보를 찾아보면 된다.

var styleEle = document.createElement('style');
      styleEle.id = "keyset";
document.head.appendChild(styleEle);

이렇게 먼저 스타일 엘리먼트를 만들어서 헤더에 넣도록 하고 jquery 로 ready 또는 load 함수를 활용하든 아니면 그냥 바로 이어서 css와 동적값 을 이용해서 적용되도록 한다.

var setW = $('#header').width();
            styleEle.innerHTML = `
            @keyframes moveSlideshow {
                 0%{transform:translateX(` + setW + `px)}
              100% {transform: translateX(0);}
            }
            @-webkit-keyframes moveSlideshow {
                 0%{-webkit-transform:translateX(` + setW + `px)}
              100% {-webkit-transform: translateX(0);}
            }
            @-moz-keyframes moveSlideshow {
                 0%{-moz-transform:translateX(` + setW + `px)}
              100% {-moz-transform: translateX(0);}
            }
            .visual{
                  -webkit-animation: moveSlideshow 30s linear infinite;
                  -moz-animation: moveSlideshow 30s linear infinite;
                  -o-animation: moveSlideshow 30s linear infinite;
                  animation: moveSlideshow 30s linear infinite;
            }
            `;

위 코드는 #header 엘리먼트의 넓이만큼 키프레임 안의 이동 값을 맞춰 넣은 것이다. 그리고 .visual이 애니메이션 되도록 한 것이다.