时间戳

首页 > 解决方案 > React 中的 CSS 动画

css - React 中的 CSS 动画

问题描述

我正在尝试为我的 SPAN 设置动画以增加减小它的大小。但它影响了我的其他风格。请看下面的视频

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>

在此处输入图像描述

问题也是我的其他元素正在移动。我只希望 Span 或单词 TESTING 大小移动。

标签： csscss-animations

解决方案

如果您只想移动跨度本身，请尝试使用“位置：相对；”添加容器元素 并添加“位置：绝对；” 到跨度本身。（+一些固定位置的东西）

.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>

推荐阅读