[TIL]@keyframeを動的に使用

プロジェクトのプロトタイプ作業中、
@keyframeを使用したアニメーションを実装する必要があります.
propsを提供するstyledComponentを使用してモジュール化します.
同じ構成部品に別のオブジェクトを追加するには、繰り返し文を使用します.
でも、
他の要素が実行されています.
@keyframeこいつだけが単独行動した.
最後に,入力対象の値で統一する現象が現れた.
そこであちこち歩き始め、土をかきながら.
きっと無理にコードしない気持ち
@keyframeプロパティは最後の値として宣言されます.
キーフレームが複数回定義されている場合:
specでは、すべてのプロパティが各キーを指定しているわけではありません.
キーフレームが複数回定義されている場合:
最近のキーで宣言された値だけが有効です.
@keyframeで!重要は無視される.
キーフレームで!重要なプロパティを使用する定義はすべて無視されます.
ソース：MDN
動的宣言@keyframe
次のSytlyedコンポーネントでは、

export const LineAni = styled.div`
	...(생략)
  animation-name: ${(props) => `lineMoving` + props.lineOptions.index};
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  ${(props) =>
    props.lineOptions.animation === "forward"
      ? css`
          animation-direction: normal;
        `
      : css`
          animation-direction: reverse;
        `}/* animation-direction:alternate; */
  /* animation-fill-mode: forwards; */
`;

export default LineAni;

@keyframeを動的に宣言するには、
関数を作成し、@keyframe宣言を強制的に貼り付ける必要があります.

export const addAnimation = (name, body) => {
  let dynamicStyles = null;
  dynamicStyles = document.createElement("style");
  dynamicStyles.type = "text/css";
  document.head.appendChild(dynamicStyles);
  dynamicStyles.sheet.insertRule(
    `@keyframes ${name} {${body}}`,
    dynamicStyles.length
  );
};

強制貼り付け関数を作成すると、
componentプレゼンテーション関数にナビゲート
@keyframeのname値とbody値を入力します!

 const lineAniHorLayerRender = () => {
    if (LineOptions) {
      let _LineOptions = LineOptions.filter((el) => el.rotate === "hor");
      return _LineOptions.map((item, index) => {
        addAnimation(
          `lineMoving${item.index}`,
          `to {
            left: ${item.x + item.width}px;
          }`
        );
        return (
          <LineAni
            lineOptions={item}
            className={"lineAniHor-" + item.index}
            key={"lineAniHor" + index}
          />
        );
      });
    }

styledComponentは@keyframeを動的に使用できます.
こつこつ.