时间戳

首页 > 解决方案 > 如何在css中停止文本动画

html - 如何在css中停止文本动画

问题描述

我的动画没有在文本末尾结束，我该怎么做才能让它在显示一些文本后停止。

h2 {
  justify-content: center;
  position: relative;
  font-size: 14vw;
  color: #ffffff;
  -webkit-text-stroke: 0.3vw #ffffff;
  text-transform: uppercase;
}

h2::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  color: #01fe87;
  -webkit-text-stroke: 0vw #ffffff;
  border-right: 2px solid #ffffff;
  overflow: hidden;
  animation: animate 6s linear;
}

@keyframes animate {
  0%,
  100% {
    width: 0;
  }
  70%,
  90% {
    width: 100%;
  }
}
<h2 data-text="Hi..">Hi..</h2>

我是初学者所以很多东西都不知道

标签： htmlcsscss-animations

解决方案

h2 {
  justify-content: center;
  position: relative;
  font-size: 14vw;
  color: #ffffff;
  -webkit-text-stroke: 0.3vw #ffffff;
  text-transform: uppercase;
}

h2::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  color: #01fe87;
  -webkit-text-stroke: 0vw #ffffff;
  border-right: 2px solid #ffffff;
  overflow: hidden;
  animation: animate 6s linear;
}

@keyframes animate {
  0%,
  100% {
    width: 0;
  }
  70%,
  90% {
    width: 100%;
  }
}
<h2 data-text="Hi Atih <3">Hi Atih <3</h2>

推荐阅读