CSS Animation in React-CodePudding

I'm trying to animate my SPAN to increase decrease it's size. But It affects my other style. Please see video below

CSS

.textdiv {
animation: textgrowth 1s infinite alternate;
  transform-origin: 0 0;
}

@keyframes textgrowth {
  0% {
    font-size: 40px;
  }
  100% {
    font-size: 45px;
  }
}

<h1 className={classes.heading}>
          TEST{" "}
          <span
            className={"textdiv"}
            style={{
              backgroundColor: "#5D9CEC",
              color: "white",
              borderRadius: "8px",
              padding: "8px",
            }}
          >
            TESTING
          </span>
        </h1>

The problem is also my other elements are moving. I only want the Span or word TESTING to move big and small.

CodePudding user response：

If you only want to move the span itself, try adding a container element with 'position: relative;' and add 'position: absolute;' to the span itself. ( something to fix the positioning)

.textdiv {
position: absolute;
transform: translateY(-50%);
animation: textgrowth 1s infinite alternate;
  transform-origin: 0 0;
}
.container {
position: relative;
}

@keyframes textgrowth {
  0% {
    font-size: 40px;
  }
  100% {
    font-size: 45px;
  }
}

TEST <span class="container"><span class="textdiv">TESTING</span></span>

CodePudding user response：

Its happening because of the font size change if you fix height to max value it will not move your other element.

h1{min-height:60px} /* Set the height so h1 height will not change after animation */